Question

我有这个网页

中的项目

<li>    </li>

垂直。但我需要它水平显示。我应该使用css中的哪个元素来水平而不是垂直显示项目？

这是代码：

<ul class="jobs">
        <li>
            <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />

                <div class="company">desc1</div></li>

        <li>
            <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />

                <div class="company">desc2</div></li>
    </ul>

演示页面： http://hashgurus.com/htmlpage7.html

Answer 1

.jobs {
list-style-type: none;
padding:0;
margin:0;
}

.jobs > li {
display: inline-block;
}

也许是这样的东西？

Answer 2

您可以通过使用inline指定显示属性来使列表元素水平对齐。

以下示例：

＆＃13;

li{display:inline}

＆＃13;

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

＆＃13;

Answer 3

使用

li {
    float: left;
}

用于将列表元素浮动到左侧。

Answer 4

除非绝对必要，否则不应使用浮动布局。他们是可怕的马车。 Floats 应用于从“普通”文档流中删除元素，同时允许内容在元素周围流动。一个很好的例子就是段落中的图像。

而是在容器上设置font size: 0以删除项目之间不需要的空白区域，并在容器大于窗口时将white-space: nowrap设置为内联。重置子项中的字体和空格并设置为display: inline-block。

使用内联块而不是内联可以更改每个元素的宽度和高度。

注意如果您将html的字体设置为稍后引用该字体大小，则可以使用rem单位来引用根元素的字体大小。在此示例中，我使用1rem将字体大小重置为根元素的大小。

ul {
    font-size: 0;
    white-space: nowrap;
}
li {
    display: inline-block;
    font-size: 1rem;
    white-space: initial;
}

Answer 5

你可以使用float，但你需要在它之后清除它，否则会出现布局问题。

示例：

.jobs {
  list-style: none;
}

.jobs li {
  float: left;
  margin-left: 12px;
}

.jobs::after {
  content: "";
  display: table;
  clear: both;
}

<ul class="jobs">
  <li>
    <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />

    <div class="company">desc1</div>
  </li>

  <li>
    <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />

    <div class="company">desc2</div>
  </li>
</ul>

Answer 6

您可以使用表格：

<table>
  <tr>
    <td>
      <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />
      <div class="company">desc1</div></li>
    </td>
    <td>
      <img height="80px" src="http://pbs.twimg.com/media/CEQnmWnWgAArgtf.jpg" />
      <div class="company">desc2</div></li>
    </td>
  </tr>
</table>

使用<ul> <li>标记水平而不是垂直列出项目

6 个答案: