换行后左对齐的最佳方法

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;用来隐藏子弹,并使用-(减号).

如果这还不够,隐藏项目符号并定位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;
}