ul+li 수평 가운데의 몇 가지 방법

10546 단어
하나.posotion:relative;
 
코드:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>testUl  </title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style: none;
        }
        .wrapper{
            float:left;
            position: relative;
            left:50%;
        }
        ul{
            position:relative;
            left:-50%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li>   </li>
            <li>    </li>
            <li>   </li>
            <li>   </li>
        </ul>
    </div>
</body>
</html>

브라우저 호환성: IE8 이상
IE7과 호환하려면div 밖에div {position:relative;
둘.display:inline-block +text-align:center
코드:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>testUl  </title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style: none;
        }
        .wrapper{
            text-align: center;
        }
        ul{
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li>   </li>
            <li>   </li>
            <li>   </li>
            <li>   </li>
        </ul>
    </div>
</body>
</html>

브라우저 호환성: IE8 이상
셋.diplay:table
코드:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>testUl  </title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style: none;
        }
        /*.wrapper{
            text-align: center;
        }*/
        ul{
             display:table;
             margin:0 auto;
        }
        li{
            display:table-cell;
        }
    </style>
</head>
<body>
    <!-- <div class="wrapper"> -->
        <ul>
            <li>   </li>
            <li>   </li>
            <li>   </li>
            <li>   </li>
        </ul>
    <!-- </div> -->
</body>
</html>

브라우저 호환성: IE7 다음 버전의 IE 브라우저는 지원되지 않습니다.
 
넷.display:inline-flex ＋ text-align:center
코드:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>testUl  </title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style: none;
        }
        .wrapper{
            text-align: center;
        }
        ul{
            display:-webkit-inline-box;
            display:-moz-inline-box;
            display:-ms-inline-flexbox;
            display:-webkit-inline-flex;
            display:inline-flex;
        }
       
    </style>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li>   </li>
            <li>   </li>
            <li>   </li>
            <li>   </li>
        </ul>
    </div>
</body>
</html>

브라우저 호환성: IE7 다음 버전의 IE 브라우저는 지원되지 않습니다.
귀속 입문
정규표현식을 왜 사용할까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage