0

内部にdivがあるリストがあります

<ul>
    <li>
        <div class="date">today</div>
        <div class="desc">lorem ipsum</div>
        <div class="action">
            <p>
                <a class="button">X</a>
            </p>
        </div>
    </li>
    <li>....</li>
    <li>....</li>
</ul>

そのa.buttonをdiv.action内で垂直方向に揃えるにはどうすればよいですか?

そのリストの CSS は Susy を使用して生成され、CSS は次のようになります。

ul {
  list-style: none outside none;
}
li {
  margin-left: 12.766%;
  margin-right: 12.766%;
  margin-bottom: 10px;
  background-color: #eee;
  display: block;
}
li:after {
  clear: both;
  content: "";
  display: table;
}

.date {
  float: left;
  margin-right: 2.12766%;
  width: 10.6383%;
}
.desc {
  float: left;
  margin-right: 2.12766%;
  width: 74.4681%;
}

.action {
  float: right;
  text-align: center;
  margin-right: 0;
  width: 10.6383%;
}

「desc」テキストは任意の長さにできるため、LI の高さはわかりません。

これはcodepen.ioのコードです-> http://codepen.io/anon/pen/CFhos

4

3 に答える 3

1

フレックスボックスは、フローティング要素でさえも、ほぼ何でも整列できます...

次のルールを に追加するだけliです。

display: flex;
align-items: center; /*align vertical */

更新されたCODEPEN

于 2014-09-29T08:20:17.463 に答える
0

フローティングせずにこれを行うことができます：

ul {
  list-style: none outside none;
}
li {
  display: table;
  margin-left: 12.766%;
  margin-right: 12.766%;
  margin-bottom: 10px;
  background-color: #eee;
}
p {
  display: table-cell;
  margin: 0;
  padding: 0;
}
li:after {
  clear: both;
  content: "";
  display: table;
}

.date {
  display: table-cell;
  vertical-align: middle;
  margin-right: 2.12766%;
  width: 10.6383%;
}
.desc {
  display: table-cell;
  vertical-align: middle;
  margin-right: 2.12766%;
  width: 74.4681%;
}

.action {
  display: table-cell;
  vertical-align: middle;
  margin-right: 0;
  width: 10.6383%;
}

http://codepen.io/anon/pen/yxhkA

于 2014-09-29T08:21:30.777 に答える