簡體   English   中英

CSS:在DIV中對齊LABEL的一些問題

[英]CSS: Some problems with aligning LABELs inside DIV

我有一個包含標簽的div 當我在上面貼上標簽時,它們會左對齊。 但我需要一個標簽左對齊,而另一個應該右對齊。 這是一個label上的左邊緣div ,和一個label右邊緣。 有可能嗎?

Div的課程是

.divclass {
    color: darkblue;
    font-family: serif;
    font-weight: bold;
    margin-left: 5px;
    margin-right: auto;
    position: relative;
    background-color: silver;
    border: 1px solid grey;
}

Label的課程是

.labelclass {
    background: silver;
    color: #191970;
    text-shadow: 0 1px 0 #ccc,
        0 2px 0 #c9c9c9,
        0 3px 0 #bbb,
        0 4px 0 #b9b9b9,
        0 5px 0 #aaa,
        0 6px 1px rgba(0, 0, 0, .1),
        0 0 5px rgba(0, 0, 0, .1),
        0 1px 3px rgba(0, 0, 0, .3),
        0 3px 5px rgba(0, 0, 0, .2),
        0 5px 10px rgba(0, 0, 0, .25),
        0 10px 10px rgba(0, 0, 0, .2),
        0 20px 20px rgba(0, 0, 0, .15);
    font-size: 24px;
}

您可以在要向右對齊的標簽上添加一個類,然后在其上使用float屬性....

 .divclass { color: darkblue; font-family: serif; font-weight: bold; margin-left: 5px; margin-right: auto; position: relative; background-color: silver; border: 1px solid grey; } .labelright { float: right } .labelclass { background: silver; color: #191970; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15); font-size: 24px; } 
 <div class="divclass"> <label class="labelclass">test</label> <label class="labelclass">test</label> <label class="labelclass">test</label> <label class="labelclass labelright">test</label> <label class="labelclass">test</label> <label class="labelclass">test</label> </div> 

如果無法更改HTML,則可以將nth-of-type選擇器用於要浮動的標簽。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM