1
Wenn Sie sich den Screenshot unten genau anschauen, sehen Sie, dass links von den Pfeilen eine kleine Lücke ist.Wie wird die Lücke zwischen &: nach Element behoben?
Ich denke, es geschieht, wenn das Element nicht pixelausgerichtet ist. Wie kann ich das beheben?
.stepList {
zoom: 1;
list-style: none;
padding: 0;
margin: 0 -15px 10px -15px;
border-color: #E7EAEC;
border-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
}
.stepList:before,
.stepList:after {
content: "";
display: table;
}
.stepList:after {
clear: both;
}
.stepList > li {
float: left;
text-align: center;
background-color: white;
position: relative;
}
.stepList > li.currentStep {
background-color: #233646;
}
.stepList > li.currentStep:not(:last-child):after {
border-left-color: #233646;
}
.stepList > li:hover {
background-color: #B70103;
}
.stepList > li:hover .stepTitle {
color: white;
}
.stepList > li:hover:not(:last-child):after {
border-left-color: #B70103;
}
.stepList > li:not(:last-child):before,
.stepList > li:not(:last-child):after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
z-index: 100;
}
.stepList > li:not(:last-child):after {
border-color: rgba(35, 54, 70, 0);
border-left-color: white;
border-width: 14px;
margin-top: -14px;
}
.stepList > li:not(:last-child):before {
border-color: rgba(231, 234, 236, 0);
border-left-color: #E7EAEC;
border-width: 15px;
margin-top: -15px;
}
.currentStep .stepTitle {
color: white;
}
.stepNumber {
display: inline-block;
font-size: .9em;
border-radius: 1em;
text-align: center;
line-height: 16px;
padding: 0 .3333em;
background-color: white;
border: 2px solid #ccc;
margin-right: 4px;
color: black;
font-weight: bold;
}
.stepWrap {
padding: 4px 0;
display: block;
}
a.stepWrap {
text-decoration: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul class="stepList">
<li class="currentStep" style="width:25%;">
<span class="stepWrap"><span class="stepNumber">1</span><span class="stepTitle">Customer Information</span></span>
</li>
<li style="width:25%;">
<a href="" class="stepWrap"><span class="stepNumber">2</span><span class="stepTitle">Passenger Information</span></a>
</li>
<li style="width:25%;">
<a href="" class="stepWrap"><span class="stepNumber">3</span><span class="stepTitle">Trip Itinerary</span></a>
</li>
<li style="width:25%;">
<a href="" class="stepWrap"><span class="stepNumber">4</span><span class="stepTitle">Miscellaneous</span></a>
</li>
</ul>
</body>
</html>
ich links neben den Pfeil sehen jede erkennbare Lücke nicht. Kannst du einen Screenshot machen mit Notationen und Pfeilen, die genau dorthin zeigen, wo diese Lücke ist? Btw, bitte teilen Sie uns mit, welche Browser Sie verwenden und welche Art von Computer (Mac oder PC) – zer00ne
Ich stimme dem obigen Kommentar von @ zer00ne zu. Ich sehe auch keine Lücken oder Linien (obwohl der Screenshot einen zeigt). Dieser Link kann Ihnen helfen, falls Sie offen für eine Änderung der Ansätze sind - http://stackoverflow.com/questions/27636373/how-to-make-this-arrow-in-css-only/28196665#28196665 – Harry
@ zer00ne Ein Pfeil wurde hinzugefügt: http://i.imgur.com/EXq9Lw7.png Dieser Screenshot wurde mit Chrome auf Win10 erstellt. – mpen