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

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小提琴演示 。

或者，如果您的用户具有兼容的浏览器，则可以将width设置为50% ，使用box-sizing以包含元素的已定义width内的padding和border-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小提琴演示 。

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

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

JS小提琴演示 。

如果你可以选择只需要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小提琴演示 。

注意：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 ： 除非它们包含在li元素中， 否则 ul或ol中不允许使用其他元素。 因此，要更正您的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>

如果用一个a包装li的目的是为了使a元素的可点击区域填充li ，那么只需使用a { display: block; } a { display: block; }

参考文献：

• CSS Flexbox请！ （Flexbox游乐场/演示） 。
• CSS Flexible Box Layout Module（W3.org） 。
• box-sizing 。
• float 。
• '使用CSS灵活盒'（MDN） 。

Answer 2

你可以尝试float: left的2 <div> s？

见DEMO 。

#menu1, #menu2 {
    float:left;
}

Answer 3

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

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

你可以把这个小提琴看作一个例子。

也可以看看

• CSS技巧 - 所有关于浮动
• W3Schools - CSS Float

Answer 4

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

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

奥利维尔