图片未在 <li> 上对齐答案

【问题标题】：Images don't align on <li>图片未在 <li> 上对齐
【发布时间】：2016-07-23 22:49:45
【问题描述】：

我试图将这些图像放在同一行，但图像会颠簸。这是代码：

HTML

  <div class="first-list">
    <ul>
      <li><a style="text-decoration:none;" href="http://trendwatching.com/freepublications/?utm_campaign=2016%20Global%20Consumer%20Trend%20Events&utm_content=Footer-FP&utm_source=email" target="_blank">
        <img src="#" />TW:FREE
       </a>
     </li>
      <li><a style="text-decoration:none;" href="http://spotters.trendwatching.com/?utm_campaign=2016%20Global%20Consumer%20Trend%20Events&utm_content=Footer-TW%3AIN&utm_source=email" target="_blank">
        <img src="#" />TW:IN
        <a/>
      </li>
      <li><a style="text-decoration:none;" href="http://trendwatching.com/about/" target="_blank">
        <img src="#" />TW:ABOUT
      </a>
    </li>
      </ul>
    </div>

【问题讨论】：

我正在关注这个示例，但我的图像没有与 li 垂直对齐。 jsfiddle.net/ArondeParon/kg8HG
TW:FREE TW:IN TW:ABOUT 是密码？？？
我的代码jsfiddle.net/1bhqutss
这是一个输出，不是代码，你能把代码附在你的问题上吗？
@YagoLoko 作为新的 SO 成员请通过stackoverflow.com/help/how-to-ask

标签： html css alignment

【解决方案1】：

为了在一行中获取图像，请使用 css 属性display: inline，它会将您的项目对齐在一行中

【讨论】：

【解决方案2】：

我得到了你的解决方案，在 li 元素中添加了 float=left，只需在 css 中增加宽度以防它们不合适：

<div class="first-list">
<ul>
  <li style="float:left;list-style-type: none;">
  <a style="text-decoration:none;" href="http://trendwatching.com/freepublications/?utm_campaign=2016%20Global%20Consumer%20Trend%20Events&utm_content=Footer-FP&utm_source=email" target="_blank">
    <img src="#" />TW:FREE
   </a>
 </li>
  <li style="float:left;list-style-type: none;">
  <a style="text-decoration:none;" href="http://spotters.trendwatching.com/?utm_campaign=2016%20Global%20Consumer%20Trend%20Events&utm_content=Footer-TW%3AIN&utm_source=email" target="_blank">
    <img src="#" />TW:IN
    </a>
  </li>
  <li style="float:left;list-style-type: none;"><a style="text-decoration:none;" href="http://trendwatching.com/about" target="_blank">
    <img src="#" />TW:ABOUT
  </a>
</li>
  </ul>
</div>

<style>
div{
width:1080px;
}
</style>

【讨论】：