【发布时间】：2014-08-20 05:38:29
【问题描述】：
我正在使用带有引导程序的 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>
在这里，第一个工作正常。但是第二个由于Review<br/> Contributors 中的<br/> 而破坏了样式。请看我的Fiddle。我想要做的是，如果文本长度太长，我想用相同的样式打破文本。怎么做？我试过display:table 属性。但它不起作用。
我使用<br/> 来减小大小。但我需要与 1) 相同的结果。我需要使用任何其他来代替<br/>
【问题讨论】：
-
你能扩展“打破样式”吗？通过告诉我们样式的哪一部分损坏了？
-
你能看看我的小提琴吗？它打破了我用于
li的风格 -
1) 我做了... 2) 它没有告诉我问题出在哪里。是的……休息会让它看起来很糟糕……所以不要在那里休息。 3) 小提琴不会永远持续下去，但 Stack Overflow 问题会...您应该将所有相关信息放入 Stack Overflow 上的问题中
-
删除br？我不明白你的问题
-
啊啊没关系，我想我终于找到你了。让我检查一下
标签： jquery html css twitter-bootstrap jquery-steps