Question

enter image description here

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

首先我试过桌子。但是当你看到每个项目有不同的宽度（如音符，湿度......）。所以我必须为每个项目制作每个表格。我不认为这是对的。

我试过了。

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;来隐藏项目符号，并使用- （减号）。

如果这还不够，隐藏项目符号点并定位background: 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的第一个解决方案，而无需指定正确部分的宽度。

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

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/

换行后左对齐的最佳方法

3 个答案: