html - 中间有链接，右边有图片的有序列表

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

尝试使用 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