Question

我试图让3列水平列表，右边是边距。

而且我几乎得到了它，但我有一些问题在右边对齐我的＃col3。

我尝试使用float：对，但是不行，但是使用float：left，但我猜它不正确，因为当我这样做#info #col3 {width:200px; float:left;}然后给我的{{1我的div不包含应该包含的内容。所以存在某种冲突。

你知道这样做的正确方法吗？

这是我的问题：http://jsfiddle.net/tvj4C/

这是我的代码：

HTML：

#info

CSS：

<div id="page-content">
  <h1>Title of the post</h1>
  <img src="../image1.jpg" width="700px" height="360px" />
  <div id="info">
    <h2>Info</h2>
    <ul id="col1">
      <li>Adress 1</li>
      <li>Adress 2</li>     
    </ul>
    <ul id="col2">
      <li>Phone 1</li>
      <li>Phone 2</li>   
    </ul>
    <ul id="col3">
      <li>Email 1</li>
      <li>Email 2</li>       
    </ul>
  </div>
  <div id="clear"></div>
  <div id="content">
    <h2>Subtitle of the post</h2>
    <p>Content of the post.</p>
</div>

Answer 1

display: inline-block;

我认为此处不再需要评论;）。

http://jsfiddle.net/tvj4C/1/

您还应该阅读display：table和display：table-cell。如果您将使用display：table，请记住每个table-cell的vertical-align属性。

BTW：问题有点复杂，所以如果这个答案没有达到要点，请更新问题，我会更新答案;）。

Answer 2

没有内联块的不同解决方案使用float:left;

http://jsfiddle.net/tvj4C/2/

Answer 3

问题不在于

float: left vs display: inline-block.

你设置

#page-content { width: 700px; }

太窄了，因为你的ul有一个默认的左边距，比你指定的200px更宽。

我在此处更新了原始代码：http://jsfiddle.net/97PHv/1/

试图在水平</ul>中有三个<ul>元素

3 个答案: