显示：内联不工作答案

【问题标题】：Display:inline not working显示：内联不工作
【发布时间】：2012-08-11 10:08:06
【问题描述】：

我对 html 和 css 还很陌生。

我学习了基础知识和一些高级技术，但是很长一段时间以来我一直在处理列表问题，并且想知道如何解决我的问题。

这就是想法。

我正在开一家网上商店，但我想避免使用不同的 ID 定位每一个图像、文本、链接。

我有这个想法，我会将我的 li 放在一个 div 中，这样，我列表中的所有内容都会卡在这个框内，创建一个类来正确定位我的文本、链接、图像，使用 display:inline 和 et voila ，我可以只使用一个类来创建整个产品页面。

问题是显示：内联不起作用。

如果有人能帮我解决这个问题，我将不胜感激。

这是一个不好的例子，但是，你明白其中的原理。

<!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>

【问题讨论】：

标签： html css list unordered

【解决方案1】：

display:inline 非常有限，不允许添加任何块级样式。你最好使用display:inline-block 或float:left。请记住，如果您使用浮点数，则需要将父元素的溢出设置为overflow:auto（对于 IE

【讨论】：

它有效，.nav_button li {} 是不必要的，我所要做的就是在 .nav_button 中使用 float:left。亲爱的，我的想法终于奏效了

【解决方案2】：

它不起作用的原因是因为您在 div 内使用它并且该 div 元素只有 li 元素，如果您在 div 下有多个 li 元素，则 inline 属性将起作用。

试试这个

<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>

对于css

#nav_bar .nav_button {display:inline-block;}

或者你也可以使用：

#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/

如果您使用float 方法，请确保您使用的是最后以clear:both; 指定的元素。

【讨论】：

【解决方案3】：

注意：如果父元素宽度太短而无法水平显示，那么

ul {
width: 20px;
}
li
{
display: inline;
}

不会工作。

还有在 li 元素下，如果你有 display:block;

之类的语句

li
{
display: inline;
}
li a{
display: block;
}

不工作。

【讨论】：

【解决方案4】：

内联元素不接受高度和宽度。它只会忽略它。因此，您在 css 中输入的高度和宽度将被忽略，这就是空 div 不可见的原因。另外尝试使用inline-block，它会解决问题。

【讨论】：

【解决方案5】：

使用

 display:flex;

对我有用

【讨论】：