Question

我有一个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;
}

Answer 1

您可以在要向右对齐的标签上添加一个类，然后在其上使用float属性....

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如果您无法更改HTML，则可以使用nth-of-type选择器作为要浮动的标签。

CSS：在DIV中对齐LABEL的一些问题

1 个答案: