Heim > Artikel > Web-Frontend > So erstellen Sie ein vertikales CSS-Lineal

So erstellen Sie ein vertikales CSS-Lineal

一个新手Original: 2017-09-18 09:38:592543Durchsuche

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:&#39;1&#39;;
        }*/

            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:
So erstellen Sie ein vertikales CSS-Lineal

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

In Verbindung stehende Artikel

Mehr sehen