Question

我有一个n项目列表。

我尝试将a元素与子img对齐，位于同级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位于同一面板中。

＆＃13;

<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>

＆＃13;

Answer 1

我不明白你的问题目标是什么。但是，请告诉我，如果我的答案是错误的：）

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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>

对齐列表元素中的元素

2 个答案: