Question

朋友您好我在css中遇到问题我想将div标签转换为内联

<div id="menu1">
 <ul>
 <a href="#"> <li>  one</li> </a>
 <a href="#"> <li>  two</li> </a>
 <a href="#"> <li>  three</li> </a>
 <a href="#"> <li> four </li> </a>
 <a href="#"> <li> five</li> </a>
 <a href="#"> <li>six </li> </a>
 <a href="#"> <li> seven </li> </a>
 <a href="#"> <li> eight </li> </a>
 </ul>
 </div>

<div id="menu2">
<ul>
<a href="#"> <li>  one</li> </a>
<a href="#"> <li>  two</li> </a>
<a href="#"> <li>  three</li> </a>
<a href="#"> <li> four </li> </a>
<a href="#"> <li> five</li> </a>
<a href="#"> <li>six </li> </a>
<a href="#"> <li> seven </li> </a>
<a href="#"> <li> eight </li> </a>
</ul>
</div>

现在我希望菜单1显示在左侧，菜单2显示在右侧iam上使用显示内联但不起作用

Answer 1

我建议：

div {
    width: 48%;
    float: left;
}

JS Fiddle demo

或者，如果您的用户拥有兼容的浏览器，您可以将width设置为50%，使用box-sizing包含padding和border-width元素的定义width：

div {
    width: 50%;
    float: left;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JS Fiddle demo

同样，在兼容的浏览器中，您可以使用column-count属性来定义特定数量的列，浏览器将根据这些列适合内容。为了实现这一点，我将当前（隐藏无效）的html包装在另一个元素中，并使用id'包装器'：

#wrapper {
    -moz-column-count: 2;
    -ms-column-count: 2;
    -o-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

JS Fiddle demo

如果你可以选择只需要Webkit和Opera支持，并且你的用户可能已经在他们的Firefox安装中启用了flex-box支持，那么使用CSS flex-box模型会成为一个选项，但同样需要一个包装元素包含两个菜单元素，使用以下CSS：

#wrapper {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: nowrap;
}

#wrapper > div {
    display: -webkit-flex-inline;
    -webkit-flex: 1 1 auto;
}

JS Fiddle demo

注意：WebKit实现必须以-webkit为前缀; Gecko的实现是没有前缀的，但是在偏好之后（除非你使用Nightly）; Internet Explorer实现了旧版本的规范，前缀为; Opera 12.10实现了最新版本的规范，没有前缀。

无效标记

<div id="menu1">
 <ul>
       <a href="#"> <li>  one</li> </a>
       <a href="#"> <li>  two</li> </a>
       <a href="#"> <li>  three</li> </a>
       <a href="#"> <li> four </li> </a>
       <a href="#"> <li> five</li> </a>
       <a href="#"> <li>six </li> </a>
       <a href="#"> <li> seven </li> </a>
       <a href="#"> <li> eight </li> </a>
    </ul>
</div>

ul（或ol）的唯一有效子元素是li：ul内不允许使用其他元素}或ol 除非它们包含在li元素中。因此，要更正您的HTML，它应该是：

<div id="menu1">
 <ul>
       <li><a href="#">one</a></li>
       <li><a href="#">two</a></li>
       <li><a href="#">three</a></li>
       <li><a href="#">four</a></li>
       <li><a href="#">five</a></li>
       <li><a href="#">six</a></li>
       <li><a href="#">seven</a></li>
       <li><a href="#">eight</a></li>
    </ul>
</div>

如果将li与a包裹起来的目的是使a元素的可点击区域填满li，那么只需使用a { display: block; } }

参考文献：

Answer 2

你可以试试float: left 2 <div>吗？

请参阅 DEMO 。

#menu1, #menu2 {
    float:left;
}

Answer 3

使用CSS float属性，您可以获得所需的内容。

#menu1 {
    float: left;
}
#menu2 {
    float: left;
}

您可以查看this fiddle作为示例。

另请参阅

Answer 4

我认为您应该在内联块中显示列表（使用内联块保留初始宽度）。

#menu1, #menu2 {
   display:inline-block;
}

奥利弗

在div中将div元素转换为内联

4 个答案:

无效标记

另请参阅