Question

我正在尝试使我的列表项具有相同的宽度。我已经尝试在css中设置宽度而没有任何变化。有人能搞清楚吗？这是一张图片来展示我在说什么： enter image description here

HTML：

<body>
<div class="content-wrapper" id="container">
    <header>logo
        <nav>navigation</nav>
    </header>
    <div class="clear-fix"></div>
    <div id="body">
        <section class="main-content">
            <section class="leftPane">
                    <h2>Categories</h2>

            </section>
            <section class="rightPane">
                <div class="checkout">
                        <h1>Checkout</h1>

                    <ul class="steps">
                        <li><a href="http://localhost:59213/Cart">
                                <div id="step0" class="arrow_box_grey">
                                    Shopping Cart</div>
                            </a>
                        </li>
                        <li><a href="http://localhost:59213/Cart/Student">
                                <div id="step1" class="arrow_box_grey">
                                    Student</div>
                            </a>
                        </li>
                        <li><a href="http://localhost:59213/Cart/Delivery">
                                <div id="step2" class="arrow_box_grey">
                                    Delivery</div>
                            </a>
                        </li>
                        <li>
                            <div id="step3" class="arrow_box_green">Payment</div>
                        </li>
                        <li>
                            <div id="step4" class="arrow_box_blue">Finish</div>
                        </li>
                    </ul>
                </div>
            </section>
            <div class="clear-fix"></div>
        </section>
    </div>
</div>

如果我的代码是http://jsfiddle.net/M74Em/

，那就来了

Answer 1

您需要更改此样式：

.main-content .checkout ul.steps li div {
    display: inline;
    width: 1000px;
}

您无法为内联元素设置宽度，请尝试以下操作：

.main-content .checkout ul.steps li div {
    display: inline-block;
    width: 100px;
}

Example

Answer 2

从twBootstrap开始，已应用于<ul>的{{3}}：

.ul-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.ul-justified > li {
    display: table-cell;
    float: none;
    width: 1%;
}

并将.ul-justified打到你想要对齐的任何ul列表，你得到的宽度<li>自动适合父ul的宽度。

尝试调整列表项的大小，使它们的大小相等

2 个答案: