0

我正在使用带有引导程序的 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/>in打破了样式Review<br/> Contributors。请看我的小提琴。我想要做的是，如果文本长度太长，我想用相同的样式打破文本。怎么做？我已经尝试过使用display:table属性。但它不起作用。

我已经习惯<br/>了缩小尺寸。但我需要与 1) 相同的结果。我是否需要使用任何其他代替<br/>

4

2 回答 2

2

试试这个，看看小提琴

<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;
}
于 2014-08-20T06:01:25.213 回答
0 
    .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;
    }
于 2019-09-06T11:27:50.023 回答