这是演示:http://jsfiddle.net/KS4eS/
请先看看演示。
我想将它们的对齐方式设置为相同。
像这样的东西。我怎么能?
center
------------------------------------------------------
A2345343
B435234
C4364353
D3426432632
E46324362
F235235
GGGGG
------------------------------------------------------
HTML
<div class='general'>
<div class='list'>
<div class="top_page_function">A2345343</div>
<div class="top_page_function">B435234</div>
<div class="top_page_function">C4364353</div>
<div class="top_page_function">D3426432632</div>
<div class="top_page_function">E46324362</div>
<div class="top_page_function">F235235</div>
<div class="top_page_function">GGGGG</div>
</div>
</div>
CSS
.general {
background-color: rgb(255, 255, 255);
border-radius: 8px 8px 8px 8px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
text-align: center;
padding: 10px;
}
.list{
width: 400px;
min-width: 250px;
margin-bottom: 20px;
}
答案 0 :(得分:4)
这将得到你想要的:
.general {
background-color: rgb(255, 255, 255);
border-radius: 8px 8px 8px 8px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
padding: 10px;
text-align:center;
}
.list{
margin-bottom: 20px;
text-align: left;
margin: 0 auto;
display: inline-block;
}
它也适用于任何宽度。见这里:http://jsfiddle.net/KS4eS/8/
答案 1 :(得分:1)
另一个技巧是为.List div添加一个包。
<强> HTML:强>
<div class='general'>
<div class='list_wrap'>
<div class='list'>
<div class="top_page_function">A2345343</div>
<div class="top_page_function">B435234</div>
<div class="top_page_function">C4364353</div>
<div class="top_page_function">D3426432632</div>
<div class="top_page_function">E46324362</div>
<div class="top_page_function">F235235</div>
<div class="top_page_function">GGGGG</div>
</div>
</div>
</div>
<强> CSS 强>
.general {
background-color: rgb(255, 255, 255);
border-radius: 8px 8px 8px 8px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
text-align: center;
padding: 10px;
}
.list_wrap{
margin:0 auto;
width: 250px;
}
.list{
width: 100%;
text-align:left;
margin-bottom: 20px;
}
答案 2 :(得分:0)
您可以像这样对齐您的列:
.list div {
text-align:left;
margin-left:200px;
}
答案 3 :(得分:0)
也许在top_page_function
类div周围设置一个容器,并将其位置设置为绝对值,左边为50%,这样做。
其他解决方案也有效,喜欢它们,但仅仅因为我已经成了小提琴,我发布了它
是的,你必须自己设置列表clss的高度。这是这种方法的一个结果
JSFiddle