Авто наценки не соблюдается несмотря на использование блока отображения - PullRequest
Новая
       22

Авто наценки не соблюдается несмотря на использование блока отображения

0 голосов
/ 17 января 2019

У меня есть div, содержащий два label элемента. Каждый label должен быть на стороне div. Поскольку метки являются встроенными элементами, я попытался использовать display: block, а также display: inline-block, чтобы поля вступили в силу, но результат не является ожидаемым. 

  div {
    color: #ffffff;
    background-color: #3f3f3f;
  }
  label:nth-of-type(1) {
    margin-left: 5px;
  }
  label:nth-of-type(2) {
    display: block;
    <!-- display: inline-block; -->
    margin-right: 5px;
    margin-left: auto;
  }
<div>
  <label>Left side label</label>
  <label>right side label</label>
</div>

Как видно из кода выполнения, вторая метка не относится к полям и отображается под первой.

Ответы [ 3 ]

0 голосов
/ 17 января 2019

вам не нужно указывать свойство display, просто позвольте ему быть встроенным и поэкспериментируйте со свойством float, чтобы перемещать их. 

<style>
div {
  color: #ffffff;
  background-color: #3f3f3f;
  display: block;
  height: 20px;
  width: 100%;
  
}

label:nth-of-type(1) {
  margin-left: 5px;
  float: left;
}

label:nth-of-type(2) {
  float: right;
  margin-right: 5px;
}
</style>
<html>

<body>
  <div>
    <label>Left side label</label>
    <label>right side label</label>
  </div>
</body>

</html>
0 голосов
/ 17 января 2019

С помощью более современных методов, таких как CSS Grid или Flexbox, это может быть достигнуто. Но мое решение будет с необработанным CSS, чтобы держать на уровне, аналогичном коду OP.

Обе метки должны иметь display: inline-block, чтобы оба элемента обрабатывались как блочные элементы и оставались на одной строке. Вам также нужно установить width, чтобы дать им контейнер для работы при настройке размещения текста. Для этого примера мы сделаем width: 50%.

Примечание: inline-block элементы, которые занимают полный width: 100%, приведут к тому, что метки будут находиться в отдельных строках , если вы не измените html, чтобы удалить пробел между элементы. Подробнее об этом поведении здесь и личном CodeSandbox исправления этой ошибки.

Вы заметите, что я также удалил margin-left и margin-right из расчета ширины и вместо этого использовал padding, чтобы получить одинаковое расстояние слева и справа.

HTML: 

<body>
    <div>
      <!-- Remove whitespace between labels to not exceed width: 100% -->
      <label>Left side label</label><label>right side label</label>
    </div>
  </body>

CSS: 

div {
  color: #ffffff;
  background-color: #3f3f3f;
  padding: 0 5px;
}

label {
  display: inline-block;
  width: 50%;
}

label:nth-of-type(1) {
  text-align: left; /* Not necessary, but you can explicitly set the behavior you want. */
}

label:nth-of-type(2) {
  text-align: right;
}

Codepen

0 голосов
/ 17 января 2019

Метка должна иметь ширину и отображать: блок для работы с полем auto.

Сегодня для этой цели более гибко использовать flexbox. 

div {
    color: #ffffff;
    background-color: #3f3f3f;
    display:flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

label:nth-of-type(1) {
    margin-left: 5px;
}

label:nth-of-type(2) {
    margin-right: 5px;
}
<html>
  <body>
    <div>
      <label>Left side label</label>
      <label>right side label</label>
    </div>
  </body>
</html>
...