html - 响应式列表元素和可点击最后很多漂浮在左边

Question

我在格式化和

元素左对齐。下面是jsfiddle链接。在元素填充并溢出到下一行之后，

里面的元素不与左侧对齐。

我试过把标签放在里面

元素，但是这不允许整个

标记为可点击。目标是整个

带有填充的标记可点击。

JSFiddle：https ://jsfiddle.net/w381kanu/

图片：（我想要实现的目标）

代码：

.nobottommargin {
    align-content: left;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
}

.clients-grid, .testimonials-grid {
    list-style: none;
    overflow: hidden;
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.clients-grid li, .testimonials-grid li {
    float: left;
    position: relative;
    width: 20%;
    padding-top: 16px;
    /* padding-bottom: 24px; */
    padding-left: 0px;
    padding-right: 0px;
    -webkit-backface-visibility: hidden;
}


.clients-grid li a, .clients-grid li img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 64px;
    height: 64px;
}

p{
  text-align:center;
}

.clients-grid.grid-6 li {
    width: 12.5%;
}

.li-hover {
  background-color: #F0F8FF;
}

.li-hover:hover {
  background-color: #696969;
}

<section id="content">
  <ul class="clients-grid grid-6 nobottommargin clearfix">
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Element One</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Element Two</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Earth/Horizon Element</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>One/Two/Three Elements For Elements</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Another Element</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Yet Another Element</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Element Y</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Element Z</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Receiver Element</p>
      </li>
    </a>
  </ul>
</section>

标签： htmlcsslistcss-float

Answer 1

您的 li 的不同高度会影响格式。在 css 中设置 li 的高度，你就可以开始了。一个更好的答案可能是用 flexbox 来做这件事。

.nobottommargin {
    align-content: left;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
}

.clients-grid, .testimonials-grid {
    list-style: none;
    overflow: hidden;
}

li{
height:250px;
}

ul {
    display: block;
    list-style-type: disc;
    
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.clients-grid li, .testimonials-grid li {
    float: left;
    position: relative;
    width: 20%;
    padding-top: 16px;
    /* padding-bottom: 24px; */
    padding-left: 0px;
    padding-right: 0px;
    -webkit-backface-visibility: hidden;
}


.clients-grid li a, .clients-grid li img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 64px;
    height: 64px;
}

p{
  text-align:center;
}

.clients-grid.grid-6 li {
    width: 12.5%;
}

.li-hover {
  background-color: #F0F8FF;
}

.li-hover:hover {
  background-color: #696969;
}

<section id="content">
  <ul class="clients-grid grid-6 nobottommargin clearfix">
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Element One</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Element Two</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Earth/Horizon Element</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>One/Two/Three Elements For Elements</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Another Element</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Yet Another Element</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Element Y</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Element Z</p>
      </li>
    </a>
    <a href="#">
      <li class="li-hover">
        <img class="aligncenter wp-image-4018" src="https://dummyimage.com/250/ffffff/000000" alt="" width="64" height="64">
        <p>Receiver Element</p>
      </li>
    </a>
  </ul>
</section>