Css造型步骤

Question

我在引导程序中使用Jquery步骤。我已经为样式步骤列表创建了自定义css。

我的css是

.steps li {
    padding: 7px 4px 10px;
    margin-right: 5px;
    background: #dedede;
    position: relative;
    display: inline-block;
}
.steps li:before {
    width: 0;
    height: 0;
    border-top: 17px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #fff;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}
.steps li:after {
    width: 0;
    height: 0;
    border-top: 18px inset transparent;
    border-bottom: 17px inset transparent;
    border-left: 20px solid #dedede;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    z-index: 2;
}
.steps .badge {
    margin: 0 2px 0 19px;
    position: relative;
    top: -1px;
}

和我的步骤列表

1）

<p>Correct</p>
<div class="steps">
<ul>
    <li role="tab" class="disabled" aria-disabled="true">
    <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
        <span class="badge">3</span> Review Contributors
    </a>
    </li>
</ul>
</div>

2）

<p>Wrong</p>
<div class="steps">
<ul>
    <li role="tab" class="disabled" aria-disabled="true">
        <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
            <span class="badge">3</span> Review<br/> Contributors
            </a>
    </li>
</ul>
</div>

这里，第一个工作正常。但是由于<br/>中的Review<br/> Contributors，第二个打破了样式。请参阅我的Fiddle。我想要做的是，如果文本长度太长，我想用相同的样式打破文本。怎么做？我尝试使用display:table属性。但它没有用。

我使用过来减小尺寸。但我需要的结果与1）相同。我是否需要使用任何其他代替<br/>

Answer 1

试试这个，see fiddle

<p>Correct</p>
<div class="steps">
    <ul>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
            <span class="badge">3</span> Review Contributors
        </a>

        </li>
    </ul>
</div>
<p>Wrong</p>
<div class="steps">
    <ul>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
    </ul>
</div>

和CSS

.steps li {
    margin-right: 2px;
    background: #dedede;
    position: relative;
    display: inline-block;
    width:11.5%;
    font-size:12px;
    padding:20px 0 10px 10px;
    text-align:center;
}
.steps li:before {
    width: 0;
    height: 0;
    border-top: 41px inset transparent;
    border-bottom: 40px inset transparent;
    border-left: 20px solid #fff;
    position: absolute;
    content:"";
    top: 0;
    left: 0;
}
.steps li:after {
    width: 0;
    height: 0;
    border-top: 41px inset transparent;
    border-bottom: 40px inset transparent;
    border-left: 20px solid #dedede;
    position: absolute;
    content:"";
    top: 0;
    right: -20px;
    z-index: 2;
}
.steps .badge {
    margin: 0 2px 0 19px;
    position: relative;
    top: -3px;
}

Answer 2

    .steps a {
        font-weight: bolder;
    }

    .wizard > .content > .body ul > li {
        display: table;
    }


    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
        color: white;
        cursor: default;
        background-color: #f60000;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
    }

    .nav-tabs > li > a:hover {
        border-color: #eee #eee #ddd;
    }

    .nav > li > a:focus, .nav > li > a:hover {
        text-decoration: none;
        background-color: #eee;
    }

    .nav-tabs > li > a {
        margin-right: 2px;
        line-height: 1.42857143;
        border: 1px solid transparent;
        border-radius: 4px 4px 0 0;
    }

    .nav > li > a {
        position: relative;
        display: block;
        padding: 10px 15px;
    }

    .customerrow:hover {
        background-color: steelblue;
        color: white;
    }

    .modal {
        background-color: #5665928f;
    }

    .modal-dialog {
        max-width: 800px;
    }

    .list-group-item {
        display: inline;
        border: 0px
    }

    body {
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
    }

    button, input, select, textarea {
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }
    /* jquery validation */
    label.error {
        color: #e7505a;
        margin-left: 10px;
        padding: 7px;
    }

    input.error {
        border: 2px solid #e7505a;
    }


    .steps li {
        margin-right: 2px;
        background: #2184be;
        position: relative;
        display: inline-block;
        width: 11.5%;
        font-size: 12px;
        padding: 20px 0 10px 10px;
        text-align: center;
    }

    li.done {
        background: #718781;
        margin-right: 2px;
        position: relative;
        display: inline-block;
        width: 11.5%;
        font-size: 12px;
        padding: 20px 0 10px 10px;
        text-align: center;
    }

        .steps li:before {
            width: 0;
            height: 0;
            border-top: 41px inset transparent;
            border-bottom: 40px inset transparent;
            border-left: 20px solid #fff;
            position: absolute;
            content: "";
            top: 0;
            left: 0;
        }

    .wizard > .steps .done a {
        background: #718781;
        color: #fff;
    }

        .wizard > .steps .done a:hover {
            background: #718781;
            color: #fff;
        }
    .steps li:after {
        width: 0;
        height: 0;
        border-top: 41px inset transparent;
        border-bottom: 40px inset transparent;
        border-left: 20px solid #2184be;
        position: absolute;
        content: "";
        top: 0;
        right: -20px;
        z-index: 2;
    }

    .wizard > .steps .disabled a {
        background: #2184be;
        color: black;
        cursor: default;
    }
        .steps .badge {
        margin: 0 2px 0 19px;
        position: relative;
        top: -3px;
    }

   .wizard ul > li{
       padding:12px;
   }

    .wizard > .steps .disabled a:hover {
        background: #2184be;
        color: black;
        cursor: default;
    }