小编sau*_*abh的帖子

将列表项与 ul 容器顶部对齐

li我的标签ul不是从顶部开始的。相反，它从底部开始。

我想让所有图像从顶部开始，并且这些图像的所有标签都应从图像下方 10px 开始。

重要提示：图像和文本应在 li 内居中对齐。

即使标签更大，最终输出也应该类似于下图：

任何帮助都受到高度赞赏。

代码在这里：https : //jsfiddle.net/srshah23/suctrnuq/

.cul {
  list-style-type: none;
  width: 100%;
  padding: 0;
  margin: 0px auto 0;
}
.cli {
  display: inline-block;
  width: 10%;
  padding: 0px 25px 0;
  background-size: 46px;
}
.cli .img {
  background: url("https://www.gravatar.com/avatar/3906f6fa3d7c00158d98abe7540054c8/?default=&s=64") no-repeat;
  width: 46px;
  height: 46px;
  margin: 0 auto;
}

Run Code Online (Sandbox Code Playgroud)

<div>
  <ul class="cul">
    <li class="cli">
      <div class="img"></div>
      <div>PRETTY LONG TEXT ABCDEFG</div>
    </li>
    <li class="cli">
      <div class="img"></div>
      <div>TEXTUAL PLANNING</div>
    </li>
    <li class="cli">
      <div class="img"></div> …

Run Code Online (Sandbox Code Playgroud)

html css user-interface html-lists

sau*_*abh

2016 10-02

2
推荐指数

1
解决办法

1万
查看次数