CSS は list-style-position の前にタグを使用して別の行を占有します-CSSチュートリアル-php.cn

CSS は list-style-position の前にタグを使用して別の行を占有します

黄舟

リリース： 2017-06-29 11:01:06

オリジナル

2763 人が閲覧しました

デフォルトのスタイルではタグを削除します。 list-style-positon:outside を使用するとタグは親要素の外側になりますが、 inside を使用すると別の行が占有されます。そのため、タグを in: inside の前に置きます。 (::before と変わらないようです) ですが、やはり 1 行を占めます。

下の図は、

CSS は list-style-position の前にタグを使用して別の行を占有します 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;}

ログイン後にコピー

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>

ログイン後にコピー

内で list-style-position を使用したレイアウトです。 div が li にネストされ、div が独自の行を占有する理由です。 inside, タグを使用して li, div はブロック要素なのでラップされます。

クラスを li に直接追加して、直接表示することができます: block;。

以上がCSS は list-style-position の前にタグを使用して別の行を占有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。