html - 换行后左对齐的最佳方法

Question

如您所见，我需要在换行后对齐文本。

首先我尝试了表。但正如您所见，每个项目都有不同的宽度（如注意，湿度......）。所以我不得不为每个项目制作每张桌子。我不认为这是对的。

我试过这个。

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

这似乎可行，但确切em显示不同浏览器（包括移动设备）的不同空间。这意味着我无法使其兼容。

我希望有一个简洁的方法来解决它..

Answer 1

解决方案#1：

小提琴：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>

明显的问题是<li>项目符号点......在你的例子中，看起来你可以list-style:none;用来隐藏项目符号，并使用-（减号）。

如果这还不够，隐藏要点和定位 abackground: url(mybullet.png) no-repeat left top;可能会起作用。

---

解决方案#2：

另一种使用 的解决方案display:table-cell，但请记住，IE7 不支持此功能。这样做的好处是您不必定义第二列的宽度。

小提琴：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>. 这很痛苦，但你能不能只为每个项目定义一个表格？

小提琴：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;
}

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>

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/