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

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

br 在行之间创建空间（中断）并开始新行。但是我在这里没有看到任何关于图像的对齐问题。

Answer 3

我将 css 和 html 原样复制到我的本地系统中。 div.listBoxSpacing ，我删除了 float 属性，将其替换为 display:inline-block。我要求你使用一些 reset.css 并避免浮动。我坚信 Float 导致了这个问题。如果您看到标题现在在没有和有 br' 的情况下对齐。