html - 在CSS中将div元素转换为内联

Question

你好 friend 我有一个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':

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

Note: WebKit implementation must be prefixed with -webkit; Gecko implementation is unprefixed but behind a preference (except if you are using Nightly); Internet Explorer implements an old version of the spec, prefixed; Opera 12.10 implements the latest version of the spec, unprefixed.

---

无效标记

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

如果用 a 包裹 li 的目的是让 a 元素的可点击区域填充 li ，然后简单地使用 a { display: block; }

引用资料:

• > CSS Flexbox Please! (Flexbox playground/demo) .
• > CSS Flexible Box Layout Module (W3.org) .
• > box-sizing .
• > float .
• > 'Using CSS Flexible Boxes' (MDN) .