我目前正在尝试设计一系列简单的多选框。
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标签)。
我对为什么这种行为感到好奇,有人可以将我链接到docs /解释这个概念,以便将来我可以理解这种行为吗?
答案 0 :(得分: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>
答案 1 :(得分:0)
答案 2 :(得分:0)