html - 同一行上的两个元素，多行文本

Question

我有两个元素需要放在同一行。目前我有:

#element 1 {
  display:inline-block;
  margin-right:15px;
}

#element 2 {
  display:inline-block;
}

有效，但是只要元素 2(文本)超过一行，所有内容都会失去其位置。我希望元素二始终留在一个地方，而不是在元素 2 超过两行时格式化。

参见示例图片。请注意，在第一行中它看起来很正常，但在第二行中当文本超过两行时，它开始看起来很糟糕。在图 2 中看到我想要它的样子。

Answer 1

在做这样的结构时，我更喜欢 flexbox。最好的方法是将 ul 作为一个容器，然后让每一行与段落的内容一样大。不知道您的代码如何，但在此示例中，行被跨度拆分。

<ul class="rows">
  <li><span>01</span>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem</li>
  <hr>
  <li><span>01</span>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem</li>
  <hr>
</ul>

然后 css 或 (scss) 在这种情况下会变成这样。

.rows {
  margin: 0;
  padding: 0;

  li {
    text-decoration: none;
    list-style: none;
    margin-bottom: 10px;
    display: flex; 
    justify-content: space-around;
    width: 50%;

    span {
      margin-right: 20px;
    }
  }
}

用 codepen 写了一个简单的例子:https://codepen.io/anon/pen/jJBKeq