对齐列表元素中的元素答案

【问题标题】：Aligning elements within a list element对齐列表元素中的元素
【发布时间】：2016-08-04 05:38:36
【问题描述】：

我有一个n 项目列表。

我正在尝试将具有子 img 的 a 元素对齐到兄弟 p 元素旁边。

我尝试将两者都设置为display:inline-block，但我没有看到任何变化。我的代码如下所示：

<li>
  <h3>Header 3</h3>
  <a href="#"><img src="example.img" alt=""></a>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p>
 </li>

我的目标是创建一种面板，其中a 元素位于左侧，文本旁边，h3 位于同一面板的中心。

<li>
  <h3>Header 3</h3>
  <a href="#">
    <img src="example.img" alt="">
  </a>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p>
</li>

【问题讨论】：

标签： html css html-lists

【解决方案1】：

我不明白你的问题目标是什么。但是，如果我的回答错了，请告诉我:)

li{
  list-style: none;
}
h3{
  text-align: center;
}
img{
  float: left;
}
p{
  text-align: right;
}

<li>
      <h3>Header 3</h3>
      <a href="#"><img src="example.img" alt=""></a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p>
 </li>

【讨论】：

【解决方案2】：

在a 和p 中使用display:inline-block 并设置一些width，在h3 中使用text-align:center

body,
h3,
p {
  margin: 0;
  font-size:16px /* restore font-size inline-block fix*/
}
h3 {text-align: center}
ul {
  margin: 0;
  padding: 0;
  font-size: 0
  /*inline-block fix gap*/
}
li {
  background: red;
}
a,
li,
p {
  display: inline-block;
  vertical-align: top;
  width: 50%
}
img {
  width: 100%;
  display: block
}

<ul>
  <li>
    <h3>Header 3</h3>
    <a href="#">
      <img src="//lorempixel.com/100/100" alt="">
    </a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p>
  </li>
  <li>
    <h3>Header 3</h3>
    <a href="#">
      <img src="//lorempixel.com/100/100" alt="">
    </a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p>
  </li>
</ul>

【讨论】：