Question

我试图将这些图像放在同一条线上，但图像会凸起。这是代码：

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>

Answer 1

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

Answer 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>

图片不会在<li>上对齐

2 个答案: