0

你好朋友我在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 使用显示内联但它不工作

4

4 回答 4

2

我建议：

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

JS 小提琴演示。

或者，如果您的用户有一个兼容的浏览器，您可以将 to 设置width为50%，用于在元素的定义中box-sizing包含paddingand ：border-widthwidth

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

a （或 an ）唯一有效的子元素是 an ：a or中不允许有其他元素，除非它们被包装在一个元素中。因此，要更正您的 HTML，它应该是：ulolliulol li

<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如果用 an包裹的目的a是使a元素的可点击区域填充li，那么只需使用a { display: block; }

参考：

于 2013-02-10T17:16:45.030 回答
0

可以试试float: left2s<div>吗？

见演示。

#menu1, #menu2 {
    float:left;
}
于 2013-02-10T17:14:06.487 回答
0

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

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

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

也可以看看

于 2013-02-10T17:17:23.057 回答
0

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

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

奥利维尔

于 2013-02-12T14:36:15.130 回答