Html 显示：内联不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11963780/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display:inline not working
提问by Dany
I'm fairly new to html and css.
我对 html 和 css 相当陌生。
I learned the basics and a few advanced techniques but, i have been having a problem with lists for a long time and would like to know how i could possibly fix my problem.
我学习了基础知识和一些高级技术，但是，我长期以来一直遇到列表问题，想知道如何解决我的问题。
Here's the idea.
这是想法。
I'm making an online shop but i want to avoid positioning every single images,texts,links using a different id.
我正在做一个在线商店，但我想避免使用不同的 id 定位每个图像、文本、链接。
I had this idea, I would put my li inside a div so that way, everything inside my list would be stuck inside this box, make a class positioning my text,links,images properly, use display:inline and et voila, i can create an entire page of products using only a class.
我有这个想法，我会将我的 li 放在一个 div 中，这样，我列表中的所有内容都会被卡在这个框内，创建一个类来正确定位我的文本、链接、图像，使用 display:inline 等等，我可以仅使用一个类创建整个产品页面。
The problem is display:inline isn't working.
问题是 display:inline 不起作用。
I would really appreciate it if someone could help me out on this one.
如果有人能帮助我解决这个问题，我将不胜感激。
This is a bad example but, you understand the principle.
这是一个不好的例子，但是，您了解原理。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;}
.nav_button {background-color:purple;width:100px;height:50px;}
.nav_button:hover {background-color:pink;}
.nav_button li {display:inline;} /* Not working ?!? */
.nav_button a {position:relative;color:white;text-decoration:none;top:13px;}
</style>
</head>
<body>
<table style="width:600px;margin:0 auto;">
<tr>
<td>
<ul id="nav_bar">
<div class="nav_button"> <li> <a href="#">Home</a> </li> </div>
<div class="nav_button"> <li> <a href="#">Contact us</a> </li> </div>
<div class="nav_button"> <li> <a href="#">Shipping</a> </li> </div>
<div class="nav_button"> <li> <a href="#">About us</a> </li> </div>
</ul>
</td>
</tr>
</table>
</body>
</html>
回答by matsko
display:inlineis very limited and doesn't allow any block-levelstyling to added to it. You're better off using display:inline-blockor using float:left. Keep in mind that if you use floats then you need to set the overflow of the parent element to overflow:auto(use visible for IE < 8) and this should work. Use inline-block first.
display:inline非常有限，并且不允许添加任何块级样式。你最好使用display:inline-block或使用float:left. 请记住，如果您使用浮动，那么您需要将父元素的溢出设置为overflow:auto（对 IE < 8 使用可见），这应该可以工作。首先使用内联块。
回答by Amyth
The reason it's not working is because you are using it insidea a div and that div element has only li element , the inline property would work if you have more than one li elements under a div.
它不起作用的原因是因为您在 div 内部使用它并且该 div 元素只有 li 元素，如果 div 下有多个 li 元素，则 inline 属性将起作用。
Try this
尝试这个
<ul id="nav_bar">
<li class="nav_button"> <a href="#">Home</a> </li>
<li class="nav_button"> <a href="#">Contact us</a> </li>
<li class="nav_button"> <a href="#">Shipping</a> </li>
<li class="nav_button" > <a href="#">About us</a> </li>
</ul>
and for css
和CSS
#nav_bar .nav_button {display:inline-block;}
or alternatively you can also use :
或者你也可以使用：
#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/
if you use the floatmethod make sure you are using a element specified with clear:both;in the end.
如果您使用该float方法，请确保您使用的clear:both;是最后指定的元素。
回答by Emre
note that : if the parent element width is too short to display horizantally then
请注意：如果父元素宽度太短而无法水平显示，则
ul {
width: 20px;
}
li
{
display: inline;
}
will not work.
不管用。
also under li element if you have display:block; statement such as
如果你有 display:block ，也在 li 元素下；诸如此类的声明
li
{
display: inline;
}
li a{
display: block;
}
not work.
不行。
