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

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

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

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>

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!