【问题标题】:How can I make <li> elements flow left-to-right instead of top-to-bottom?如何使 <li> 元素从左到右而不是从上到下流动?
【发布时间】:2009-06-24 17:42:26
【问题描述】:

这是我的&lt;li&gt; 元素。我希望它们从左到右而不是从上到下显示。

<div class="nav">
  <ul>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
    <li><a href="test">test</a></li>
  </ul>
</div>

我该怎么做?

编辑:如何控制每个 li 元素及其背景颜色之间的间距以及元素与 li 元素边框之间的间距?

【问题讨论】:

    标签: html css


    【解决方案1】:

    我想你正在寻找

    li {
      display:inline;
    }
    

    【讨论】:

    • 顺便说一句,如何调整每个
    • 元素之间的间距?
  • @Shore — 如果你想控制间距,最好使用display: inline-block,这样你就可以在内联元素上使用marginwidth 等属性。跨度>
  • 哦,看来display: inline-block IE 不支持。
  • 否,但 IE 将 display: inline 视为 display: inline-block,因此您可以使用条件 cmets 来更改 IE 看​​到的内容,从而获得相同的效果。更严重的问题是 FF2 的缺失,可以再次解决,但只能使用非验证 CSS。或者,您可以切换到float 解决方案并将这些大小和位置问题换成标准浮动问题,这可以在&lt;ul&gt; 上使用overflow: auto 在很大程度上解决。
  • 虽然它在 Firefox 中对我有用,但在 Google Chrome 中却没有!
  • 【解决方案2】:

    有几种方法。

    一种方法是 display:inline 正如其他帖子提到的那样

    另一种方式是float:left;

    编辑:更详细!在页面中试试这个

    <style>
    /* style 1 */
    div.nav1 ul li
    {
      display:inline;
    
      border: solid 1px black;
      padding: 10px;
      margin: 10px;
    
      list-style-type: none;
      line-height: 4em;
    }
    
    /* style 2 */
    div.nav2 ul li
    {
      float: left;
      border: solid 1px black;
      padding: 10px;
      margin: 10px;
    
      list-style-type: none;
    }
    </style>
    
    <h1>using display: inline;</h1>
    <div class="nav1">
    <ul>
    <li><a href="#">inline</a></li>
    <li><a href="#">inline blah bla</a></li>
    <li><a href="#">i am not so neat on</a></li>
    <li><a href="#">inline</a></li>
    <li><a href="#">wrapping and I probably</a></li>
    <li><a href="#">inline</a></li>
    <li><a href="#">need a bit of work and tweaking</a></li>
    <li><a href="#">inline</a></li>
    <li><a href="#">the "line-height" css property</a></li>
    <li><a href="#">inline</a></li>
    <li><a href="#">to make me wrap better</a></li>
    <li><a href="#">inline</a></li>
    <li><a href="#">also notice how i tend to break a line up into .. two.  see?  make your browser narrow.</a></li>
    <li><a href="#">inline</a></li>
    </ul>
    </div>
    
    <hr />
    
    <h1>using float:left;</h1>
    <div class="nav2">
    <ul>
    <li><a href="#">floated left</a></li>
    <li><a href="#">i tend to behave</a></li>
    <li><a href="#">floated left</a></li>
    <li><a href="#">better for wrapping</a></li>
    <li><a href="#">floated left</a></li>
    <li><a href="#">when the list</a></li>
    <li><a href="#">floated left</a></li>
    <li><a href="#">reaches the edge of the page</a></li>
    <li><a href="#">floated left</a></li>
    </ul>
    </div>
    

    【讨论】:

      【解决方案3】:

      试试:

      <style>
      .nav li {display:inline;}
      </style>
      <div class="nav">
              <ul>
                      <li><a href="test">test</a></li>
                      <li><a href="test">test</a></li>
                      <li><a href="test">test</a></li>
                      <li><a href="test">test</a></li>
                      <li><a href="test">test</a></li>
              </ul>
      </div>
      

      样式确实应该在外部样式表中,为了简单起见,我只是将它们放在页面上。

      【讨论】:

      • 哦,它有效,但你能解释一下为什么改变 li display:inline 会隐藏 UL 的项目符号吗?
      • 项目符号仅出现在带有display: list-item 的元素上,这是
      • 元素的默认值。将它们更改为 display: inline 后,浏览器将不再将它们视为列表元素并删除项目符号。这同样适用于编号列表。
      【解决方案4】:

      你可以使用 float 属性:

      .nav ul li{float:left;}
      

      【讨论】:

      • float 容易出问题,我觉得 display:inline 比较好。
      • 您可能还想设置.nav ul { overflow: auto; } 以避免浮动元素的一些潜在问题。
      • @Shore — 我自己通常更喜欢display: inline,但两者都有自己的位置。正如您在其他地方指出的那样,更改 display 会阻止列表项目符号/编号,并且还有其他细微差别。
      • @Shore - 浮动可能是最好的,因为元素是块,这意味着您可以更好地控制它们的样式。
      【解决方案5】:

      只是让您知道,当您将列表项浮动到左侧时,IE 会执行“降级”操作,我认为 IE 是唯一这样做的浏览器,所有其他浏览器都继续前进。要让列表项直接穿过,请在您的 css 中使用“display: inline”而不是“float:left”,这应该在所有浏览器中都以这种方式工作。更多详细解释,请查看quick tutorial

      【讨论】:

        【解决方案6】:
        .nav li  { display: inline }
        

        更多详情和灵感,请查看Listamatic。他们有大量优秀的教程,其中包含分步说明以及有关边距、填充和浏览器兼容性问题的所有内容。

        【讨论】:

          【解决方案7】:

          编辑后回答问题:

          li {
              float: left;
              display: block;
              padding: 4px 12px;   /* example spacing */
              margin: 0px 4px;     /* example margin */
          }
          

          编辑:您可能希望将填充和 display:block 应用到 元素,以便您也可以点击填充:

          li {
              float: left;
              margin: 0px 4px;     /* example margin */
          }
          li a {
              display: block;
              padding: 4px 12px;   /* example spacing */
          }
          

          【讨论】:

            【解决方案8】:

            你可以使用display: inline,像这样:

            li{
                display: inline;
            }
            

            或者,如果您有更多列表,您可以为该特定列表分配一个类:

            <ul class="navbar horizontal">
                <li>Test</li>
            </ul>
            

            然后将其设置为:

            .horizontal{
                display: inline;
            }
            

            【讨论】:

              猜你喜欢
              相关资源
              最近更新 更多
              热门标签