左对齐换行后的最佳方法

Question

您看到了，我需要在换行后对齐文本。

首先我尝试了表格。但是您可以看到每个项目的宽度都不同（如注释、湿度...）。所以我不得不为每个项目制作一个表格。我认为这样做是不正确的。

然后我尝试了这个。

li.list {
    padding-left: 3.5em;
    text-indent: -3.5em;
}

看起来这个工作，但是不同的浏览器（包括移动端）显示em不同的间距。这意味着我无法使其兼容。

希望有一种简洁明了的方法来解决这个问题...

- Deckard

---

请在提问时始终附上代码演示。我们需要看到上下文。http://jsfiddle.net/ - Timidfriendly

好的，我会记住的。 - Deckard

Answer 1

解决方案＃1：

Fiddle:
http://jsfiddle.net/38GpE/2/

CSS：

.pretext
{
    font-weight:bold;
    display:inline-block;
    vertical-align:top;
}

.text
{
    width:300px;
    display:inline-block;
}

HTML：

<ul>
    <li>
        <div class="pretext">Something: </div>
        <div class="text">
            ...text...
        </div>
    </li>
</ul>

明显的问题是

项目符号...在您的示例中，看起来您可以使用list-style:none;隐藏该符号，并使用-（减号）。如果不行，隐藏项目符号并定位background:url(mybullet.png) no-repeat left top;可能有效。

---

解决方案 #2：

另一种使用 display:table-cell 的解决方案，但请注意这在 IE7 中不受支持。不过好处是您不必定义第二列的宽度。

Fiddle:
http://jsfiddle.net/38GpE/3/

CSS：

.pretext
{
    font-weight:bold;
    display:table-cell;
    vertical-align:top;
    white-space:nowrap;
}

.text
{
    display:table-cell;
}

---

解决方案 #3：

您在评论中提到您不需要使用 <li>。虽然有些麻烦，但您能否为每个项目定义一个表格？

Fiddle:
http://jsfiddle.net/zuPcx/

HTML：

<table>
    <tr>
        <td class="pretext">Something:</td>
        <td>{your text}</td>
    </tr>
</table>

<table>
    <tr>
        <td class="pretext">Something else:</td>
        <td>{your text}</td>
    </tr>
</table>

CSS：

.pretext
{
    font-weight:bold;
    display:table-cell;
    vertical-align:top;
    white-space:nowrap;
}

.text
{
    display:table-cell;
}

- Jace

---

<li>只是一个例子，我不一定要使用它。而且我需要限制宽度为“300px”吗？ - Deckard

@Deckard 我更新了我的答案，提供了一种使用 display:table-cell 的替代方案，这不需要您为第二列设置宽度。然而，我认为 display:table-cell 在 IE7 中不受支持。但在第一个解决方案中，您需要定义第二列的宽度，是的。（当然，它不必是 300px） - Jace

@Deckard 我添加了另一个可能的解决方案，使用表格。 - Jace

Answer 2

对于未来可能遇到这个问题的人，有一种简单的方法可以实现Jace的第一个解决方案，而无需为右侧部分指定宽度。

/* This is all you need */

.pretext {
  float: left;
}
.text {
  overflow: hidden;
}


/* This is just to make it pretty */

.pretext {
  margin-right: 10px;
  font-weight: bold;
}

<div class="text-container">
  <div class="pretext">Something:</div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis odio a quam rutrum cursus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sed elit in urna vulputate mollis.
    Nam luctus tincidunt imperdiet. Morbi adipiscing, lorem quis tempus rhoncus, mauris orci rutrum tortor, ultricies porta libero velit quis nisl. Aenean molestie magna quis leo consectetur bibendum.
  </div>
</div>

<div class="text-container">
  <div class="pretext">Something else:</div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis odio a quam rutrum cursus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sed elit in urna vulputate mollis.
    Nam luctus tincidunt imperdiet. Morbi adipiscing, lorem quis tempus rhoncus, mauris orci rutrum tortor, ultricies porta libero velit quis nisl. Aenean molestie magna quis leo consectetur bibendum.
  </div>
</div>

- Antoine Combes

Answer 3

//HTML   
 <div class="container">
        <span class="textHeading">Something: </span>
        <p class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis odio a quam rutrum cursus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sed elit in urna vulputate mollis. Nam luctus tincidunt imperdiet. Morbi adipiscing, lorem quis tempus rhoncus, mauris orci rutrum tortor, ultricies porta libero velit quis nisl. Aenean molestie magna quis leo consectetur bibendum. 
        </p>
    </div>

    <div class="container">
        <span class="textHeading">Something else: </span>
        <p class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis odio a quam rutrum cursus. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sed elit in urna vulputate mollis. Nam luctus tincidunt imperdiet. Morbi adipiscing, lorem quis tempus rhoncus, mauris orci rutrum tortor, ultricies porta libero velit quis nisl. Aenean molestie magna quis leo consectetur bibendum. 
        </p>
    </div>

//CSS

    textHeading, .text{
        display: inline-block; vertical-align: top;
    }
    .textHeading
    {
        font-weight:bold;   
        width: 120px;
        /*text-align: right;*/
    }
    .text
    {
        width:500px;
        padding:0; margin:0;
        width: 400px; 
    }


    You can check here: `http://jsfiddle.net/49EBr/2/

- Pramod Bhoi