图片排列不正确

时间：2016-07-20 18:35:18

标签： html css

我正在尝试创建一个图像列表（作为链接），它会在悬停时亮起。但是，在每个图像的开头添加<div class="hover">会使它们停止显示在水平行中。如何修复它以便它允许我将它放在水平行中？

＆＃13;
＆＃13; 
.hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.hover:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
}
＆＃13; 
<body bgcolor="#000000">

<ul class="list-inline">
          <div class="hover">
             <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/youtube-active.png" height="39px" width="99px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitter-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/facebook-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/soundcloud-active.png" height="56px" width="72"></div></li>
          <div class="hover">
             <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/googleplus-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/steam-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitch-active.png" height="56px" width="56px">
            </div></li>
＆＃13;
＆＃13;
＆＃13;

对于任何糟糕的代码或令人困惑的问题，我们很抱歉，这是我的第一篇文章。

由于

2 个答案:

答案 0 :(得分：1)

Divs是默认的块级元素，占用尽可能宽的宽度，因此通过将display: inline;添加到您的悬停类来将显示从块更改为内联：

.hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  display: inline;
}
.hover:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
}
<body bgcolor="#000000">

  <ul class="list-inline">
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/youtube-active.png" height="39px" width="99px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitter-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/facebook-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/soundcloud-active.png" height="56px" width="72">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/googleplus-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/steam-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitch-active.png" height="56px" width="56px">
    </div>
    </li>

另一种选择是使用.hover浮动float:left div：

.hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  float:left;
}
.hover:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
}
<body bgcolor="#000000">

  <ul class="list-inline">
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/youtube-active.png" height="39px" width="99px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitter-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/facebook-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/soundcloud-active.png" height="56px" width="72">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/googleplus-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/steam-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitch-active.png" height="56px" width="56px">
    </div>
    </li>

答案 1 :(得分：0)

问题是你正在为每个图像使用div而div是块级元素，它占用一个完整的行，但是你可以通过将其display属性设置为inline来使块级元素像内联元素一样工作。例如display: inline; 

.list-inline{
   text-align: center; 
}

.hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
    display: inline;
}

.hover:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
    cursor: pointer;
}
<body bgcolor="#000000">

<ul class="list-inline">
          <div class="hover">
             <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/youtube-active.png" height="39px" width="99px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitter-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/facebook-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/soundcloud-active.png" height="56px" width="72"></div></li>
          <div class="hover">
             <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/googleplus-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/steam-active.png" height="56px" width="56px"></div></li>
          <div class="hover">
              <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitch-active.png" height="56px" width="56px">
            </div></li>

相关问题
最新问题