Question

我想设计一个有序列表，其中间有一篇文章的链接，右边是一个小的png img文件

以下是我要制作的确切列表的图片：http://i.imgur.com/b0KfwuA.png

我现在的代码看起来很接近这个，但并不完全存在。为了实现这个有序列表，我需要对代码进行哪些更改？

HTML

<div id ="most-emailed">
      <h2>MOST EMAILED</h2>
        <ol>
          <li>
            <a href="">Well: Writing Your Way To Happiness</a>
            <img src="images/well.jpg"/>
          </li>

          <li>
            <a href="">White House Proposals on 529 College Plans Would Reduce Benefits</a>
          </li><img src="images/silver.jpg"/>
          <li>
            <a href="">Well: Ask Well: The Benefits of a Lunch Hour Walk</a>
            <img src="images/physed.jpg"/>
          </li>
          <li>
            <a href="">Well: Ask Well: The Best Time of Day to Exercise to Lose Weight</a>
            <img src="images/morning.jpg"/>
          </li>
          <li>
            <a href="">Op-Ed Contributor: Why Adnan Syed of 'Serial' Should Have Pleaded Guilty</a>
            <img src="images/murray.jpg">
          </li>
          <li>
            <a href="">36 Hours in Denver</a>
            <img src="images/denver.jpg"/>
          </li>
          <li>
            <a href="">U.S Says Assembly Speaker Sheldon Silver Took Millions in Payoffs...</a>
            <img src="images/silver.jpg"/>
          </li>
          <li>
            <a href="">Paul Krugman: Much Too Responsible</a>
            <img src="images/krugman.png"/>
          </li>
          <li>
            <a href="">David Brooks: The Devotion Leap</a>
            <img src="images/brooks.png"/>
          </li>
          <li>
            <a href="">36 Hours: What to Do in Denver</a>
            <img src="images/36hours.jpg"/>
          </li>
        </ol>

  </div

CSS

#most-emailed{
  width:250px;
  height:500px;
  float:right;
  border-top:1px solid #C9C9C9;
  border-bottom: 1px solid #C9C9C9;
}

#most-emailed h2{
  font-size:10px;
  margin:0;
  padding-top:10px;
  padding-bottom:10px;
  font-family:arial;
  font-weight:700;
}
#most-emailed img{
  width:30px;
  height:30px;
}

#most-emailed ol{
  padding:0;
  margin:0;

}

#most-emailed a {
  color:#6288a5;
  font-size:12px;
  vertical-align:middle;
}
#most-emailed li{
  width:100%;
  height:50px;
  text-align:left;
  list-style-type:inside;
}

Answer 1

你总是可以使用一张桌子。

<ul>
   <li><table><tr><td><a href="mylink.com">My Link</a></td><td><img src="#" /></td></tr></table></li>
   <li>[[repeat process]]</li>
    ...
</ul>

Answer 2

你需要将你的imgs浮动到左边

#most-emailed li{
float:left; <!-- this will push text to left of image -->
width:80%; <!-- leave some room for the image -->
height:50px;
text-align:left;
list-style-type:inside;
}

#most-emailed img{
float:left; <!-- this will push img to right of text -->
width:20%; <!-- set to percentage -->
height:30px; <!-- you should be able to remove this -->
}

Answer 3

尝试使用display: table，display: table-row和display: table-cell，如下所示：

<强> JSFiddle DEMO

#most-emailed{
  width:250px;
  float:left;
  border-top:1px solid #C9C9C9;
  border-bottom: 1px solid #C9C9C9;
}

#most-emailed h2{
  font-size:10px;
  margin:0;
  padding-top:10px;
  padding-bottom:10px;
  font-family:arial;
  font-weight:700;
}
#most-emailed img{
  width:30px;
  height:30px;
}

#most-emailed ol{
  padding:0;
  margin:0;
    display: table;
}

#most-emailed a {
  color:#6288a5;
  font-size:12px;
}
#most-emailed li img {
    height: 50px;
    width: 50px;
}
#most-emailed li{
  width:100%;
    height: 50px;
    display: table-row;
}
#most-emailed li a,
#most-emailed li img {
    display: table-cell;
    height: 50px;
    vertical-align: middle;
    padding: 5px;
}

使用表格的所有好处，没有任何实际表格带来的麻烦。一定要喜欢现代网络。

修改
我会将这些数字添加为跨度以与table-cell CSS格式保持一致：

<li> <span>1</span> <a href="">Well: Writing Your Way To Happiness</a> <img src="images/well.jpg"/> </li> #most-emailed li span, #most-emailed li a, #most-emailed li img { display: table-cell; height: 50px; vertical-align: middle; padding: 5px; }

<强> Updated Demo

有序列表，中间是链接，右侧是图像

3 个答案: