css - 如何使用 CSS 左对齐 DIV 的内容？

Question

我有一个 875 像素宽的 DIV。它从页面的左边距开始。它的 CSS 类是

.three-column

    {
        width:875px;
        float:left;
    }

DIV 里面是另一个DIV。此 DIV 包含标签和如下所述的字段。我希望这些 DIV 从主容器的左上角开始，从左到右流动，然后到下一行。这适用于包含的 CSS。它的 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 中右对齐。然后，我希望标签紧靠输入框。由于文本标签较短而导致的任何额外空间都应出现在标签的左侧。我该怎么做？

Answer 1

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

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>