css utilise la balise devant list-style-position pour occuper une ligne séparée-tutoriel CSS-php.cn

css utilise la balise devant list-style-position pour occuper une ligne séparée

黄舟

Libérer： 2017-06-29 11:01:06

original

2761 Les gens l'ont consulté

Le style par défaut consiste à supprimer la balise. J'ai ajouté la balise En utilisant list-style-positon:outside, la balise sera en dehors de l'élément parent, mais en utilisant inside occupera une ligne séparée

Donc I La marque est placée à l'intérieur de :before (elle ne semble pas être différente de ::before), mais elle occupera toujours une ligne seule
L'image ci-dessous montre la mise en page en utilisant list-style-positon:inside

;

css utilise la balise devant list-style-position pour occuper une ligne séparée

css

.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;}

Copier après la connexion

html

            

    <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>

Copier après la connexion

devrait être la raison pour laquelle le div est imbriqué dans le li et le div occupe le sien doubler. Utilisez inside, tag pour entrer li, div est un élément de bloc, il est donc encapsulé.

Vous pouvez directement ajouter la classe à li, puis afficher directement : block;.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!