0

这是演示：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;
}
4

4 回答 4

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/

于 2013-01-28T17:34:09.783 回答
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;
}

JSFiddle

于 2013-01-28T17:44:03.437 回答
0

您可以像这样对齐列：

.list div {
    text-align:left;
    margin-left:200px;
}
于 2013-01-28T17:29:51.127 回答
0

也许在类 div 周围设置一个容器top_page_function并将其位置设置为绝对位置，左侧为 50%，就可以了。
其他解决方案也可以，更喜欢它们，但只是因为我做了小提琴，所以我发布了它。
是的，您也必须自己设置列表 clss 的高度。这是这种方法的一个缺点。
JSFiddle

于 2013-01-28T17:36:19.297 回答