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

Question

我在同一行上有两个元素。目前我有：

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

#element 2 {
  display:inline-block;
}

它起作用了，但是只要元素2（文本）多于一行，那么一切都会失去位置。我希望元素2始终留在一个位置，并且当元素2超过两行时不格式化。

请参阅示例图片。请注意，在第一行中它看起来很正常，但是在第二行中，当文本在两行以上时，它看起来就很糟糕。在图片2中看到我想要的样子。

Answer 1

您可以通过多种方式进行操作。使用弹性，使用网格或使用绝对定位。在此示例中，数字是使用counters()函数的CSS生成的内容。

ul {
  counter-reset: index;  
  padding: 0;
}

/* List element */
li {
  counter-increment: index; 
  width: 200px;
  min-height: 50px;
  display: flex;
  padding-bottom: 12px;
}


/* Element counter */
li::before {
  content: counters(index, ".", decimal-leading-zero);
  font-size: 1.5rem;
  font-weight: bold;
  flex-grow: 1;
  min-width: 50px;
}


/* Element separatin */

li + li {
  border-top: 1px solid gray;
  padding-top: 12px;
}

<ul>  
  <li> 
    lorem ipsumt dolor sit amet consecutor adipiscing lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li>
    lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li> 
    lorem ipsumt dolor sit amet consecutor adipiscing lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li>
    lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li> 
    lorem ipsumt dolor sit amet consecutor adipiscing lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li>
    lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li> 
    lorem ipsumt dolor sit amet consecutor adipiscing lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li>
    lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li>
    lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
  <li>
    lorem ipsumt dolor sit amet consecutor adipiscing
  </li>
</ul>

Answer 2

在做这样的结构时，我更喜欢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

Answer 3

有多种方法。 CSS Flex是最佳选择。或使用可能会使用绝对位置编号的

HTML

<ul>
    <li class="element-wrap">
        <div class="element-1">1</div>
        <div class="element-2>Lorem Ipsum Dummy text for any content</div>
    </li>
</ul>

CSS-使用绝对位置

.element-wrap {
    position: relative;
    z-index: 0;
    padding-left: 50px; //This should be equal to width of first element.
}
.element-1 {
    position: absolute;
    left: 0;
    top: 0;
}

CSS-使用FLEX

.element-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.element-1 {
    width: 40px;//
}