css uses the tag in front of list-style-position to occupy a separate line-CSS Tutorial-php.cn

css uses the tag in front of list-style-position to occupy a separate line

黄舟

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

Original

2761 people have browsed it

The default style removes the tag. I added the tag. Using list-style-positon:outside the tag will be outside the parent element, but using inside will occupy a separate line;

So I Put the mark inside :before (it seems to be no different from ::before), but it will still occupy one line;
The picture below shows the layout using list-style-positon:inside

css uses the tag in front of list-style-position to occupy a separate line

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

Copy after login

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>

Copy after login

It should be the reason why the div is nested in the li and the div is on its own line. Use inside, tag to enter li, div is a block element, so it is wrapped.

You can directly add the class to li, and then directly display: block;.

The above is the detailed content of css uses the tag in front of list-style-position to occupy a separate line. For more information, please follow other related articles on the PHP Chinese website!