Heim >Web-Frontend >CSS-Tutorial >So erstellen Sie ein vertikales CSS-Lineal
So erstellen Sie ein vertikales CSS-Lineal
- 一个新手Original
- 2017-09-18 09:38:592598Durchsuche
Heute kann ein Freund von mir das vertikale Lineal nicht schreiben, also habe ich ihm geholfen. Jetzt habe ich es geklärt, aber davor steht kein Zahlenwert Ich hoffe, dass du es ertragen kannst.
<body>
<p>
<!-- <ul>
<li class="right1"><b>0</b></li>
<li class="right1"><b>1</b></li>
<li class="right1"><b>2</b></li>
<li class="right1"><b>3</b></li>
<li class="right1"><b>4</b></li>
</ul> -->
<ul>
<li class="left1">
<li class="right11">
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
</li>
</li>
<li class="left1">
<li class="right11">
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
</li>
</li>
<li class="left1">
<li class="right11">
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
</li>
</li>
<!-- <dl class="font">1000</dl> -->
<li class="left1">
<li class="right11">
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
</li>
</li>
<li class="left1">
<li class="right11"></li></li>
<!-- <li class="left1">
<li class="right11">
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
<li class="mileft1">
<li class="miright11"></li>
</li>
</li>
</li> -->
</ul>
</p>
</body> <link rel="stylesheet" type="text/css" href="style.css"> ul {
list-style: none;
}
ul .right1 {
position: relative;
width: 10px;
height: 8px;
border-bottom: 1px solid gray;
border-left: 1px solid transparent;
}
ul .left1 {
position: relative;
width: 10px;
height: 8px;
border-bottom: 1px solid gray;
border-right: 1px solid gray;
}
ul .right11 {
/*position: relative; */
width: 10px;
margin-left: 10px;
margin-top: -1px;
/*height: 20px; */
border-bottom: 1px solid gray;
/*border-right: 1px solid gray; */
}
.miright11 {
/*position: relative; */
width: 5px;
margin-left: 10px;
margin-top: -1px;
/*height: 20px; */
border-bottom: 1px solid gray;
/*border-right: 1px solid gray; */
}
.mileft1 {
/*position: relative; */
width: 5px;
height: 8px;
margin-left: 5px;
border-bottom: 1px solid gray;
border-right: 1px solid gray;
}
/*ul > li:before{
content:'1';
}*/
ul > li + li {
border-left-color: gray;
}
ul > li > b {
display: block;
position: absolute;
height: 20px;
line-height: 20px;
margin-left: 20px;
margin-top: 10px;
}
/* ul li:before{
content:"1";
}*/Rendering: 
Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein vertikales CSS-Lineal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Der Unterschied zwischen display:inline-block und float in CSS beim Anordnen von Elementen in einer ReiheNächster Artikel：Der Unterschied zwischen display:inline-block und float in CSS beim Anordnen von Elementen in einer Reihe