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

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

黄舟

Freigeben： 2017-06-29 11:01:06

Original

2763 Leute haben es durchsucht

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 verwendet das Tag vor list-style-position, um eine separate Zeile zu belegen 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: &#39;·&#39;;font-size: 16px;display: inline-block;
}*/
.info_con span {font-size:18px;border-bottom: 2px solid #ccc;}
.info_con a:hover{text-decoration: underline;}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!