我有li项如何水平显示或格式整洁
下面是我的HTML
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="script.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
strong {
cursor: pointer;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>RSC Acquirer Agent Messages</h1>
</div>
</div>
<!-- /.row -->
</div>
<div ng-controller="ExampleController">
<ul class="list-unstyled" class="list-group">
<li ng-repeat="t in data.transactions">
<ul class="list-unstyled" style="border: none">
<li ng-repeat="(key, value) in t" ng-if="key!='__opened'"
class="list-group" style="border: none"><span
class="glyphicon glyphicon-plus-sign"></span> <strong
ng-click="t.__opened=!t.__opened">{{key}} </strong>
<ul ng-if="t.__opened" class="list-unstyled">
<li><strong
ng-click="value.request.__opened=!value.request.__opened"
class="list-group-item list-group-item-info"
style="border: none"> <span
class="glyphicon glyphicon-plus-sign"></span>Request
</strong>
<ul ng-if="value.request.__opened" class="list-unstyled">
**<li ng-repeat="re in value.request""list-group-item">
{{re.Field}} {{re.length}} {{re.value}}</li>**
</ul></li>
<li><strong
ng-click="value.response.__opened=!value.response.__opened"
class="list-group-item list-group-item-info"
style="border: none"><span
class="glyphicon glyphicon-plus-sign"></span>Response</strong>
<ul ng-if="value.response.__opened" class="list-unstyled"
class="list-group-item">
<li ng-repeat="re in value.response""list-group-item" >
{{re.Field}} {{re.length}} {{re.value}}</li>
</ul></li>
</ul></li>
</ul>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
li，结果如下
**<li ng-repeat="re in value.request""list-group-item">
{{re.Field}} {{re.length}} {{re.value}}</li>**
</ul></li>
DE-000 004 0110
DE-001 008 00110010 00111010 00000000 00000000 00001110 11000001 10000000 00000010
DE-003 006 003000
DE-004 012 000000004100
DE-007 010 0807063032
DE-011 006 010424
DE-012 006 163032
DE-013 004 0807
DE-015 004 0719
DE-037 012 321916010424
我想格式化，以便显示器像下面一样正确对齐，这样每个字段都可以分开并很好地显示。
DE-000 004 0110
DE-001 008 00110010 00111010 00000000 00000000 00001110 11000001
10000000 00000010
DE-003 006 003000
我如何实现这一点我尝试使用表格格式，但是对于每个循环，列都没有正确对齐。而不是在没有表格的情况下在表格中显示。
答案 0 :(得分：2)
你可以这样做：
.list-unstyled{
list-style: none;
}
.list-unstyled li span{
display: inline-block;
margin-right: 40px;
}
.list-unstyled li span:last-child{
margin-right: 0;
}<ul class="list-unstyled">
<li>
<span>DE-000</span>
<span>004</span>
<span>0110</span>
</li>
<li>
<span>DE-000</span>
<span>004</span>
<span>0110</span>
</li>
<li>
<span>DE-000</span>
<span>004</span>
<span>0110</span>
</li>
<li>
<span>DE-000</span>
<span>004</span>
<span>0110</span>
</li>
</ul>
答案 1 :(得分：0)
使用此css样式
li{margin-right: 30px;}
答案 2 :(得分：0)
由于您事先并未知道元素的最大宽度，因此表格实际上是执行此操作的正确方法。表格旨在显示表格数据，这实际上就是您所拥有的。我不知道您遇到问题的原因，但使用现代显示特性可以完全控制您的桌面显示。
让我们说，不是使用传统的表格标记，而是使用以下内容。 （我不使用Angular，所以我的语法可能不正确）
<div id=fields>
**<p ng-repeat="re in value.request""list-group-item">
<span>{{re.Field}}</span>
<span>{{re.length}}</span>
<span>{{re.value}}</span></p>**
</div>
现在尝试以下CSS：
#fields {
display: table;
width:100%;
}
#fields p {
display: table-row;
}
#fields p span {
display: table-cell;
margin-right: 20px;
}
您可以根据需要进行修改以更改列的空间分布。