Возникли проблемы со стилем CSS и выберите поля с кнопками

Question

Я сейчас пытаюсь оформить серию простых полей с несколькими вариантами выбора.

https://next.plnkr.co/edit/wBfAMTYvPPjWncsY?open=lib%2Fscript.js&deferRun=1

Это HTML

<div class="listBoxSpacing">
    <span class="listBoxHeaders">Days Of The Week:</span>
    <select class="listBoxSelectStyle" multiple size="7" ng-options="day as day.day for day in vm.daysOfWeek track by day.day" ng-model="vm.daysOfWeekSelected"></select>
    <br />
    <button>Select All</button>
  </div>
  <div class="listBoxSpacing">
    <span class="listBoxHeaders">Dates Of The Month:</span>
    <select class="listBoxSelectStyle" multiple size="7" ng-options="date as date.date for date in vm.datesInTheMonth track by date.date" ng-model="vm.datesInTheMonthSelected"></select>
    <br />
    <button>Select All</button>
  </div>
  <div class="listBoxSpacing">
    <span class="listBoxHeaders">Days Of The Week:</span>
    <select class="listBoxSelectStyle" multiple size="7" ng-options="day as day.day for day in vm.daysOfWeek track by day.day" ng-model="vm.daysOfWeekSelected"></select>

    <button>Select All</button>
  </div>

Это Javascript ...

 vm.daysOfWeek = [
    {day: 'Monday'},
    {day: 'Tuesday'},
    {day: 'Wednesday'},
    {day: 'Thursday'},
    {day: 'Friday'},
    {day: 'Saturday'},
    {day: 'Sunday'},
  ];
  vm.datesInTheMonth = [];
  for (let i = 1; i < 32; i++) {
    vm.datesInTheMonth.push({date: i});
  }
  vm.daysOfWeekSelected = [];
  vm.datesInTheMonthSelected = [];

Это CSS

.listBoxHeaders {
  display:block;
  margin-top: 10px;
}
.listBoxSpacing {
  float:left;
}
.listBoxSpacing:nth-child(n+2) {
   margin-left:30px;
}
.listBoxSpacing button{
  width: 100%;
}
.listBoxSelectStyle {
  width:100%;
  margin-bottom: 0;
  padding-bottom: 0;
}

Как видно из приведенного выше кода, первые и вторые (с тегом br) правильно совмещаются с заголовком. Тем не менее, третий с тем же кодом, что и первый, не выравнивается с заголовком должным образом (без тега br).

Мне любопытно, почему это поведение так, может кто-нибудь связать меня с документами / объяснить концепцию, чтобы я мог понять это поведение в будущем?

Answer 1

Я скопировал CSS и HTML, как есть. В моей локальной системе. div.listBoxSpacing , я удалил свойство float и заменил его на display: inline-block . Я прошу вас использовать reset.css и избегать поплавков. Поскольку я твердо верю, что Float вызывает эту проблему. если вы видите, что заголовки выровнены сейчас без и с br ' s.

Answer 2

    :root {
      font-family: 'Arial', Helvetica, Helvetica Neue, sans-serif;
      font-size: 100%;
    }
    body,
    nav,
    section,
    article,
    main,
    aside,
    header,
    figure,
    div,
    p,
    a,
    span,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ul,
    ol,
    li,
    table,
    thead,
    tbody,
    tfoot,
    tr,
    th,
    td,
    dl,
    dd,
    dt,
    blockquote,
    fieldset,
    legend,
    input,
    textarea,
    select,
    select option,
    button,
    label,
    img,
    footer {
      box-sizing: border-box;
    }
    html,
    body,
    input,
    select,
    select option,
    label,
    textarea,
    button {
      font-family: 'Arial', Helvetica, Helvetica Neue, sans-serif;
      font-size: 100%;
    }
    nav,
    section,
    article,
    main,
    aside,
    header,
    figure,
    footer {
      display: block;
    }
    dl,
    dd,
    dt {
      margin: 0;
    }
    blockquote {
      margin: 0;
      padding-left: 1.75em;
    }
    fieldset {
      margin: 0;
      padding: 0.25em;

      border: 0 solid transparent;
    }
    body {
      color: rgba(23, 23, 23, 0.99);
    }
    body,
    ul,
    figure {
      margin: 0;
      padding: 0;
    }
    svg {
      width: 100%;
      height: auto;
    }
    iframe {
      overflow: hidden;

      margin: 0.02em;

      border: none;
    }
    a {
      text-decoration: none;

      color: inherit;
    }
    p {
      margin: 0;

      line-height: 1.75;
    }
    hr {
      display: -ms-flexbox;
      display: flex;

      min-width: 100%;
      max-width: 100%;
      margin: 0;

      border-top: 0.125px solid rgba(10, 10, 10, 0.25);
      border-right: 0;
      border-bottom: 0;
      border-left: 0;

      font-size: 0;
      line-height: 0;

      -ms-flex-preferred-size: 100%;

      flex-basis: 100%;
    }
    img {
      width: 100%;
      height: auto;

      border: 0 solid transparent;
    }
    [ng\:cloak],
    [ng-cloak],
    [data-ng-cloak],
    [x-ng-cloak],
    .ng-cloak,
    .x-ng-cloak {
      display: none;
    }

    h1,
    p {
      font-family: sans-serif;
    }
    .listBoxSpacing {
      display: inline-block;
      width: auto;
      vertical-align: top;
    }
    .listBoxSpacing:not(:first-child),
    .listBoxSpacing:not(last-child) {
      margin: 0 1em;
    }
    .listBoxHeaders,
    .listBoxSelectStyle,
    .listBoxSpacing button {
      width: 100%;
      display: block;
    }

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl as vm">
      <div class="listBoxSpacing">
        <span class="listBoxHeaders">Days Of The Week:</span>
        <select class="listBoxSelectStyle" multiple size="7" ng-options="day as day.day for day in vm.daysOfWeek track by day.day" ng-model="vm.daysOfWeekSelected"></select>
        <button>Select All</button>
      </div>
      <div class="listBoxSpacing">
        <span class="listBoxHeaders">Dates Of The Month:</span>
        <select class="listBoxSelectStyle" multiple size="7" ng-options="date as date.date for date in vm.datesInTheMonth track by date.date" ng-model="vm.datesInTheMonthSelected"></select>
        <button>Select All</button>
      </div>
      <div class="listBoxSpacing">
        <span class="listBoxHeaders">Dates Of The Month:</span>
        <select class="listBoxSelectStyle" multiple size="7" ng-options="day as day.day for day in vm.daysOfWeek track by day.day" ng-model="vm.daysOfWeekSelected"></select>
        <button>Select All</button>
      </div>
    </div>
  </body>
</html>

Answer 3

br создает пробел между строками (разрыв) и начало новой строки. Но я не вижу здесь никаких проблем с выравниванием со ссылкой на изображение.