如何正确对齐列表项？

Question

我想通过显示名称，属性列表和图像来创建项目列表。虽然这似乎是一个非常常见且容易解决的问题，但我正在努力做到这一点。

在更改了标记十几次之后，我选择用ul表示列表，其中每个li由h3（名称），{{1}组成（）属性和ul（图像）。

为了让它更多地填充页面，我使用CSS的img以便以响应的方式将图像和属性放在一起。

flexbox

img {
  max-width: 100px;
}

#example > ul > li {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

h3 {
  width: 100%;
  text-align: center;
}

div > ul {
  border-left: 2px solid red;
}

当所有元素的属性同样长时，这看起来相当不错，但是当不是这种情况时它看起来很乱（属性列表没有正确对齐，如上面代码片段中的红线所示）。我知道我可以获取表中的所有内容，导致每个表元素在彼此之间很好地对齐，但是后来我不知道如何将我的名字放在与属性和图像不同的行中...

因此，我的问题可以表述为：
如何将这些属性完美地对齐在一起，使它们显示在图像旁边（以填充屏幕上的空间）？此外，我希望当屏幕变得太小（即响应式设计）和名称的单独行时，图像会显示在属性下。

非常感谢任何帮助

更新

事实证明我的问题不是那么清楚，我试图通过在代码段中添加垂直红线来更清楚。我设法在使用表格时获得所需的结果，但是我必须省略名称（如附图所示）和响应性......

Answer 1

你可以创建一个简单的item元素，如下所示：

HTML

<li class="item">
  <h2>Charmander</h2>
  <div class="content">
    <h3>Properties</h3>
    <ul>
      <li>orange or some kind of red, I am not completely sure</li>
      <li>lizard</li>
      <li>fire</li>
    </ul>
  </div>
  <div class="image">
    <img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
  </div>
</li>

我只是将元素分为三个主要部分： title ， properties 和 image 。
如您所见，属性仍然在<ul>内，因为它们像枚举一样使用。

CSS

#example > ul {
  padding: 0;
}

.item {
  width: 100%;
  background: #CCC;
  padding: 20px;
  box-sizing: border-box;
  /* Padding will be inside the element (will not affect the width/height) */
  margin: 20px 0;
  overflow: hidden;
  /* Used to keep the floated element inside the flow */
}

.item h2 {
  text-align: center;
}

.item .content {
  width: 60%;
  float: left;
  padding-left: 20px;
  box-sizing: border-box;
}

.item .image {
  width: 200px;
  float: left;
}

.item img {
  width: 100%;
}

.item .content ul {
  border-left: 2px solid red;
  margin-bottom: 20px;
}

使用第一个选择器（#example > ul），我重置了它的默认padding。

如果属性太长，属性文本将在新行开始（您可以通过调整窗口大小来测试）。

您只需编辑padding-left元素的.content，即可将属性向右或向左移动一点。

Example JsFiddle

这只是为了举例说明你想如何处理这个问题。

希望它有用！

Answer 2

我真是太蠢了。作为helpful answer of nkmol的替代方法，它也可以像将justify-content属性更改为space-between一样简单，并通过设置宽度和自动边距来更正它。

img {
  max-width: 100px;
}

#example > ul > li {
  width: 80%;
  margin: auto;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

h3 {
  width: 100%;
  text-align: center;
}

li > div > ul {
  border-left: 2px solid red;
}

<section id="example">
  <ul>
    <li>
      <h3>Bulbasaur</h3>
      <div>
        <span>Properties</span>
        <ul>
          <li>green</li>
          <li>seed</li>
          <li>grass</li>
          <li>poison</li>
        </ul>
      </div>
      <img src="http://cdn.bulbagarden.net/upload/2/21/001Bulbasaur.png" />
    </li>

    <li>
      <h3>Charmander</h3>
      <div>
        <span>Properties</span>
        <ul>
          <li>orange or some kind of red, I am not completely sure</li>
          <li>lizard</li>
          <li>fire</li>
        </ul>
      </div>
      <img src="http://cdn.bulbagarden.net/upload/7/73/004Charmander.png" />
    </li>

    <li>
      <h3>Squirtle</h3>
      <div>
        <span>Properties</span>
        <ul>
          <li>blue</li>
          <li>tiny turtle</li>
          <li>water</li>
        </ul>
      </div>
      <img src="http://cdn.bulbagarden.net/upload/3/39/007Squirtle.png" />
    </li>
  </ul>
</section>

PS：我很抱歉我的问题很糟糕......

Answer 3

您需要从主UL

中分类

您可以将其视为构建表格，而是使用div，然后使用UL来列出属性。这样，您可以根据需要设置每个元素的样式。

看这里：http://127.0.0.1:3000/dist/main-8c26aa183d856d3d3955.js.map

Migrate Documents