我有这个复选框列表，我想在标签结束的地方结束每个 li。我不希望它跨越整条线。
我尝试了不同版本的 white-space 但都没有用。
angular.module('app',['ui.bootstrap'])
.controller('mainCtrl', function() {
var vm = this;
vm.alertFilters = [
{ key: 'Filter 1', value: 1 },
{ key: 'Filter 2', value: 2 },
{ key: 'Filter 3', value: 3 },
{ key: 'Filter 4', value: 4 },
{ key: 'Filter 5', value: 5 },
{ key: 'Filter 6', value: 6 },
{ key: 'Filter 777777777', value: 7 },
{ key: 'Filter 888888888888', value: 8 }
];
});.liAlertFilters {
display: block;
float: left;
width: 100%;
white-space: nowrap;
}
.ulAlertFilters {
padding-left: 0;
}<html ng-app="app">
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/rpocklin/angular-timeline/dist/angular-timeline-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/rpocklin/angular-timeline/dist/angular-timeline.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rpocklin/angular-timeline/dist/angular-timeline.js"></script>
</head>
<body>
<div ng-controller="mainCtrl as vm">
<div class="col-lg-6 col-md-6 col-sm-12 alertFilters">
<form>
<label class="control-label">Alert Filters</label>
<ul class="ulAlertFilters">
<li ng-repeat="alertFilter in vm.alertFilters" class="liAlertFilters">
<input type="checkbox" name="alertsFilter" id="alertsFilter{{::$id}}" ng-value="alertFilter.value">
<label for="alertsFilter{{::$id}}" ng-bind="alertFilter.key" class="alertLabel"></label>
</li>
</ul>
</form>
</div>
</body>
</html>我需要它在我的黄线结束的地方结束
最佳答案
然后移除width:100%并清除每个li后的 float 。
.liAlertFilters {
display: block;
float: left;
clear: both;
/* width: 100%; */
white-space: nowrap;
}
关于html - 打破文本结束的列表行 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54256560/