以下是我从代码段中看到的内容,根据您的设备,您可能会看到不同的内容:
更新:我想要实现的目标是:
仅使用CSS我希望块像左侧面板一样浮动,但让右侧面板中的所有块都打到右侧。
.container {
background-color: wheat;
display: table;
overflow: hidden;
}
.inner {
border: 1px solid green;
display: table-cell;
overflow: hidden;
width: 50%;
}
.right {
text-align: right;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
border: 4px solid grey;
display: inline-block;
width: 50px;
height: 50px;
}
<div class="container">
<div class="inner">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>
<div class="inner right">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>
</div>
答案 0 :(得分:0)
如果是,请将text-align: left;
添加到您的ul
.container {
background-color: wheat;
display: table;
overflow: hidden;
}
.inner {
border: 1px solid green;
display: table-cell;
overflow: hidden;
width: 50%;
}
.right {
text-align: right;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align:left;
}
li {
border: 4px solid grey;
display: inline-block;
width: 50px;
height: 50px;
}
<div class="container">
<div class="inner">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>
<div class="inner right">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>
</div>
答案 1 :(得分:0)
尝试将text-align:left;
添加到您的li中。
编辑:Fiddle