CSS verwendet das Tag vor list-style-position, um eine separate Zeile zu belegen

Der Standardstil besteht darin, das Tag zu entfernen. Bei Verwendung von list-style-position:outside befindet sich das Tag außerhalb des übergeordneten Elements, bei Verwendung von inside wird es jedoch eine separate Zeile einnehmen I Die Markierung wird innerhalb von :before platziert (es scheint sich nicht von ::before zu unterscheiden), aber sie wird immer noch eine einzige Zeile einnehmen

Das Bild unten zeigt das Layout mit list-style-position:inside

CSS

HTML

.info{margin:0px auto;width:1200px;height:auto;}
.info::after{clear: both}
.info .info_con{float:left;height: auto;width:46%;padding: 10px; }
.info .info_con ul{ border: 1px solid #ccc;padding: 10px;margin-top:7px;}
.info .info_con ul li{
    line-height:30px;font-size:14px;
     list-style-type: disc!important;list-style-position: inside;
}
/*.info .info_con ul li:before{ 
    content: '·';font-size: 16px;display: inline-block;
}*/
.info_con span {font-size:18px;border-bottom: 2px solid #ccc;}
.info_con a:hover{text-decoration: underline;}

sollte der Grund sein, warum das Div im Li verschachtelt ist und das Div seinen eigenen Platz belegt Linie. Verwenden Sie inside, tag, um li einzugeben, div ist ein Blockelement und wird daher umschlossen.

            

    <div class="info">
        <div class="info_con">
          <span>贷款最新动态</span>
          <ul>
            <li>                    
              <div class="ap-link">
                <a href="#">有房就能贷</a>
              </div>
            </li>
            <li>                
               <div class="ap-link">
                <a href="#">有车就能贷</a>
                </div>                        
            </li>
            <li>
              <div class="ap-link">
                <a href="">月入2000即可贷贷</a>
             </div>
            </li>
            <li>
                <div class="ap-link">
                    <a href="#">有经营场所就能贷</a>
                </div>
            </li>            
            </ul>
        </div>
    
        <div class="info_con">
            <span>贷款最新动态</span>
            <ul>
                <li>
                    <div class="ap-link">
                      <a href="">有房就能贷</a>
                    </div>
                </li>
                <li>
                    <div class="ap-link">
                      <a href="">有车就能贷</a>
                    </div>
                </li>
                <li>
                    <div class="ap-link">
                        <a href="">月入2000即可贷贷</a>
                    </div>
                            
                </li>
                <li>
                    <div class="ap-link">
                        <a href="">有经营场所就能贷</a>
                    </div>
                </li>                   
            </ul>
         </div>
    
    </div>

Sie können die Klasse direkt zu li hinzufügen und dann direkt anzeigen: block;.

Das obige ist der detaillierte Inhalt vonCSS verwendet das Tag vor list-style-position, um eine separate Zeile zu belegen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!