CSS样式文本与标签对齐

时间:2013-12-24 03:56:35

标签: html css

如何调整文字以“如果整齐而直接看起来很棒。是的,我推荐这个产品”与“......的材料”相同。

<span class="titlerm">Description:</span>
<span style="margin-left:40px; text-align:justify;">  
<asp:Label ID="productreviewLabel" runat="server" Text='<%# Eval("productreview") %>' /
</span>

结果如下所示:

enter image description here

我想要的结果是:

enter image description here

3 个答案:

答案 0 :(得分:2)

HTML和CSS代码

<span class="titlerm" style=" width:6%; display:block; float:left; font-family:Arial, Helvetica, sans-serif;"><strong>Description:</strong></span>
<span style=" display:block; width:94%; float:left; text-align:justify; font-family:Arial, Helvetica, sans-serif;">  
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>

试试此代码

答案 1 :(得分:1)

试试这个:

http://jsfiddle.net/d6vsN/

HTML:

<span class="titlerm"><strong>Description:</strong></span>
<span class="description">  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum ex magni provident harum saepe perspiciatis veniam totam doloribus dolorem blanditiis.
</span>

CSS:

.titlerm {
    height: 100%;
    width: 20%;
    display: block;
    float: left;
}

.description {
    float: right;
    width: 80%;
}

答案 2 :(得分:1)

试试这个..

<span class="title">Description:</span>
<span class="description">  
   <asp:Label ID="productreviewLabel" runat="server" Text='<%# Eval("productreview") %>' /
</span>

Css -

.title {
float:left;
width:20%;
font-weight:bold;
}

.description{
float:left;
width:80%;
}

DEMO