Question

使用此代码：

       <div class="details">
            <strong>Publisher:</strong>
            <span class="red"><asp:Label ID="LabelPublisher" runat="server"></asp:Label></span>
       </div>

       <div class="details">
            <strong>Author:</strong>
            <span class="red"><asp:Label ID="LabelAuthor" runat="server"></asp:Label></span>
       </div>

       <div class="details">
            <strong>Year:</strong>
            <span class="red"><asp:Label ID="LabelYear" runat="server"></asp:Label></span>
       </div>

...浏览器上的文字显示如下：

出版商：publisher1
作者：author1
年份：2014

现在使用CSS我想在每个标签上移动这样的文字：

出版商：--- Publisher1
作者：-----作者1
年份：------ 2014

Answer 1

您可以将固定的最小宽度设为strong标记

.details strong {
    display: inline-block;
    min-width: 100px;
}

<强> DEMO

Answer 2

您应该使用表格以这种方式显示文本。

以下是一个示例：http://jsfiddle.net/h8tshvty/

<table>
        <tr class="details">
            <td><strong>Publisher:</strong></td>
            <td class="red">Publishername</td>
       </tr>

       <tr class="details">
            <td><strong>Author:</strong></td>
            <td class="red">Author name</td>
       </tr>

       <tr class="details">
            <td><strong>Year:</strong></td>
            <td class="red">Yearnumber</td>
       </tr>
</table>

使用CSS移动文本

2 个答案: