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

Question

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

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

#element 2 {
  display:inline-block;
}

它可以工作，但只要元素2（文本）有多行，那么一切都会失去它的位置。我希望元素2总是停留在一个地方，而不是格式当元素2超过两行时。

见示例图片。请注意，在第一行中它看起来很正常，但在文本位于两行以上的第二行中，它看起来很糟糕。请参见图2，了解我的样子。

Answer 1

在做这样的结构时，我更喜欢flexbox。最好的方法是将ul作为容器，然后使每行与段落的内容一样大。不知道你的代码是怎样的，但是在这个例子中，行是用span分割的。

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

有多种方式。 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;//
}

Answer 3

您可以通过多种方式完成此操作。使用flex，using，grid或使用绝对定位。在此示例中，数字是使用counters()function的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>