Question

我的DIV宽度为875像素。它从页面的左边缘开始。它的CSS类是

.three-column

    {
        width:875px;
        float:left;
    }

在DIV内部是另一个DIV。此DIV包含标签和下面描述的字段。我希望这些DIV从主容器的左上角开始并从左向右流动，然后流向下一行。这适用于CSS inlcuded。它的CSS类是

.LabelAndField
{
    width: 240px;
    margin-left:auto;
    float:left; 
}

这是该字段的CSS（输入框）

fieldset input[type="text"].editor-field-score
{
    border: 1px solid #cccccc;     
    font-size: 1.0em;
    font-weight: 600;   
    padding: 5px;
    margin-right : 20px;
    float : right;
    width : 50px;
    text-align: right;
}

这是标签的CSS

fieldset .editor-label-score 
{
    float:left;
    font-size: 1.0em;
    font-weight: normal;
    padding-right: 10px;
    margin :10px 0px 0px 0px;
    color: #9900CC;
    text-align: right;
}

我希望输入框在LabelAndField DIV中右对齐。然后，我希望标签abutt输入框。由于文本标签较短而产生的任何额外空间应显示在标签的左侧。我该怎么做？

Answer 1

text-align: right;会这样做，但这适用于儿童，而不是元素本身

fieldset .editor-label-score 
{
    float:left;
    font-size: 1.0em;
    font-weight: normal;
    padding-right: 10px;
    margin :10px 0px 0px 0px;
    color: #9900CC;
    text-align: right;
}

这很好，就像这样做

<fieldset class="editor-label-score">
     <a>description of TxtBox</a>
</fieldset>

我如何使用CSS离开DIV的内容？

1 个答案: