html - CSS 悬停列表不起作用

Question

我已经创建了一个 html 列表列表，它在右边有一个图像和一个文本。

我试图在每个元素列表的顶部和底部放置一个边框。我也尝试移除第一个 child 顶部的边框和最后一个 child 的底部边框以使其相等。

然后我添加了一个悬停效果，它会悬停在每个列表上，只要处于事件状态。但是由于某种原因，这不起作用，每个元素的填充和边框都乱七八糟。

尽我最大的努力在我的盒子周围玩耍，但仍然很难修复它。

这是我的 CSS:

body{
color: #fff;
}

ul li {
  list-style: none;
  display: block;
  clear: both;
}

.puff-list {
  background-color: #34495e;
  width: 260px;
  float: left;
}

.puff-list .puffs h2{
  text-align: center;
  border-bottom: 1px solid #57789a;
  padding: 20px 30px 35px 20px;
  font-size: 23px;
  font-weight: 400;
}

.puff-list .fa-puffs {
  position: relative;
  left: -25px;
  color: #34495e;
}
.puff-list ul {
  /*padding: 20px 40px;*/
  padding: 0;
}
.puff-list ul li {
  display: block;
  list-style: none;
  border-bottom: 1px solid #57789a;
  padding-left: 39px;
  padding-top: 15px;
}

.puff-list ul li:first-child{
  border-top: none;
}

.puff-list ul li:last-child{
  border-bottom: 1px solid #57789a;
}

.puff-list ul li:hover{
 background-color: #5b7b9b;
 cursor: pointer;
}

.puff-list .puff-details {
  float: left;
  margin-top: 8px;
}

.puff-list img {
  margin-right: 5px;
  float: left;
}

.puff-list .puff-details {
  padding-left: 8px;
}
.puff-list .status {
  color: #658aaf;
}

您可以在 JSFIDDLE 上查看整个 HTML 和 CSS Playground :https://jsfiddle.net/9b6w9L6m/

知道如何解决这个问题吗？

Answer 1

首先你需要解决一些问题。

你的 .puff-details 上有一个 float: left 是不需要的，因为你没有在该行上 float 任何其他元素，所以删除那个。

.puff-details 中的元素是 float 的，这使得元素“ float 在外部”。因此你需要添加 clearfix 解决方案来使 .puff-details 扩展:

.puff-list .puff-details {
  /*float: left; < remove this line */
  margin-top: 8px;
}
.puff-list .puff-details:after { 
   content: " "; 
   display: block; 
   height: 0; 
   clear: both;
}

第一项和最后一项的边框已经生效。

完整代码:

body {
  color: #fff;
}

ul li {
  list-style: none;
  display: block;
  clear: both;
}

.puff-list {
  background-color: #34495e;
  width: 260px;
  float: left;
}

.puff-list .puffs h2 {
  text-align: center;
  border-bottom: 1px solid #57789a;
  padding: 20px 30px 35px 20px;
  font-size: 23px;
  font-weight: 400;
}

.puff-list .fa-puffs {
  position: relative;
  left: -25px;
  color: #34495e;
}

.puff-list ul {
  /*padding: 20px 40px;*/
  padding: 0;
}

.puff-list ul li {
  display: block;
  list-style: none;
  border-bottom: 1px solid #57789a;
  padding-left: 39px;
  padding-top: 15px;
}

.puff-list ul li:first-of-type {
  border-top: none;
}

.puff-list ul li:last-child {
  border-bottom: 1px solid #57789a;
}

.puff-list ul li:hover {
  background-color: #5b7b9b;
  cursor: pointer;
}

.puff-list .puff-details {
  /*float: left;*/
  margin-top: 8px;
}

.puff-list .puff-details:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}

.puff-list img {
  margin-right: 5px;
  float: left;
}

.puff-list .puff-details {
  padding-left: 8px;
}

.puff-list .status {
  color: #658aaf;
}

<aside class="puff-list" id="puff-list">

  <div class="puffs">
    <h2> <i class="fa fa-address-book-o"></i> Check List</h2>
  </div>

  <ul>
    <li>
      <img src="https://i.imgur.com/3I9Odgf.jpg" />
      <div class="puff-details">
        <div class="puff-name">Food</div>
        <div class="status">
          <i class="fa fa-circle online"></i> online
        </div>
      </div>
    </li>

    <li>
      <img src="https://i.imgur.com/3I9Odgf.jpg" />
      <div class="puff-details">
        <div class="puff-name">Russian</div>
        <div class="status">
          <i class="fa fa-circle online"></i> online
        </div>
      </div>
    </li>

    <li>
      <img src="https://i.imgur.com/3I9Odgf.jpg" />
      <div class="puff-details">
        <div class="puff-name">Honey</div>
        <div class="status">
          <i class="fa fa-circle online"></i> online
        </div>
      </div>
    </li>

    <li>
      <img src="https://i.imgur.com/3I9Odgf.jpg" />
      <div class="puff-details">
        <div class="puff-name">Mox</div>
        <div class="status">
          <i class="fa fa-circle online"></i> online
        </div>
      </div>
    </li>

    <li>
      <img src="https://i.imgur.com/3I9Odgf.jpg" />
      <div class="puff-details">
        <div class="puff-name">Party</div>
        <div class="status">
          <i class="fa fa-circle online"></i> online
        </div>
      </div>
    </li>

    <li>
      <img src="https://i.imgur.com/3I9Odgf.jpg" />
      <div class="puff-details">
        <div class="puff-name">Event</div>
        <div class="status">
          <i class="fa fa-circle online"></i> online
        </div>
      </div>
    </li>

    <li>
      <img src="https://i.imgur.com/3I9Odgf.jpg" />
      <div class="puff-details">
        <div class="puff-name">Rrose</div>
        <div class="status">
          <i class="fa fa-circle online"></i> online
        </div>
      </div>
    </li>

    <li>
      <img src="https://i.imgur.com/3I9Odgf.jpg" />
      <div class="puff-details">
        <div class="puff-name">test</div>
        <div class="status">
          <i class="fa fa-circle online"></i> online
        </div>
      </div>
    </li>

    <li>
      <img src="https://i.imgur.com/3I9Odgf.jpg" />
      <div class="puff-details">
        <div class="puff-name">Manga</div>
        <div class="status">
          <i class="fa fa-circle online"></i> online
        </div>
      </div>
    </li>
  </ul>
</aside>