我只是为客户清理一些CSS。
我不是前端人员,但已通过bootstrap保存(谢谢,推特)。
但是,我很难清理自定义导航面板 (没有推特)。我在下面提供了CSS。我需要它能够:
1)在结尾优雅地关闭(开头以垂直边框开始,而不是箭头。 我希望最终具有对称性并且关闭它开始的方式)。
2)让容器不要扩展到页面的末尾。
3)我似乎无法让它在chrome中工作。它在chrome中分崩离析但在IE和Ff中有效。
这是链接。有什么建议?非常感谢。
http://annualdinnerdev.elasticbeanstalk.com/
/* ------- Wizard Interface ---------- */
#wizHeader
{
border: solid 3px #fff;
margin-bottom:25px;
-moz-box-shadow: 3px 3px 4px #C2CBCE;
-webkit-box-shadow: 3px 3px 4px #C2CBCE;
box-shadow: 3px 3px 4px #C2CBCE; /* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#C2CBCE')"; /* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color= '#C2CBCE' );
}
#wizHeader li label
{
font-size:x-large;
}
#wizHeader li a
{
font-size:large;
}
#wizHeader li .prevStep
{
background-color: #D6E6FA;
color:#000;
}
#wizHeader li .prevStep:after
{
border-left-color: #D6E6FA !important;
}
#wizHeader li .currentStep
{
background-color: #6699CC;
color:#fff;
}
#wizHeader li .currentStep:after
{
border-left-color: #6699CC !important;
}
#wizHeader li .nextStep
{
background-color: #F0E9EA;
color:gray;
}
#wizHeader li .nextStep:after
{
border-left-color: #F0E9EA !important;
}
#wizHeader
{
list-style: none;
overflow: hidden;
font: 14px Helvetica, Arial, Sans-Serif;
margin: 0px;
padding: 0px;
}
#wizHeader li
{
float: left;
}
#wizHeader li a
{
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
#wizHeader li a:after
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
#wizHeader li a:before
{
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 35px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
#wizHeader li:first-child a
{
padding-left: 10px;
}
#wizHeader li:last-child
{
padding-right: 18px;
}
答案 0 :(得分:0)
以下是要添加到#wizHeader的声明的一些示例(将这些声明添加到CSS声明中当前的声明)
#wizHeader {
background: #6699CC;
width: 960px;
}
根据评论添加更多内容......
箭头被撞击的原因是因为它们是块元素,向左浮动,因此它们将流动以适应它们可用的任何宽度,并在它们用完时下拉到下一行。
如果你想切断最后一个箭头,你可以通过定位包装最后一个箭头的
#wizHeader li:last-child {
width: 172px; /* you might have to tweak this a bit*/
overflow: hidden;
padding-right: 0;
}
然后,相应地更改#wizHeader的宽度。使用上面的片段,930px宽似乎可以解决这个问题。