碼上歡樂
相關內容    簡體    繁體

【CSS】怎樣使ul/li制作的水平方向的菜單/按鈕/鏈接組 靠左/居中/靠右顯示

本文轉載自   查看原文   2021-11-25 20:48   1033    Web.Css

CSS網文的一大毛病是只有代碼沒有圖，這咋可以呢？！所以在這里我先上效果圖，還為了大家看清特地保留了div的邊框：

先說關鍵點，要讓li水平排列，其display屬性都應該是inline或是inline-block，下面的例子全用了inline-block;

要讓li子項靠左，應該設置其float屬性為left；居中或靠右時不要浮動（去掉float屬性），設置父元素ul的text-align屬性為center或right即可。

其它請大家自行查看代碼。

再上html代碼：

<div class="container">
            <div class="topWrapper"> <!-- 靠左的五個li項 -->
                <ul>
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                    <li>D</li>
                    <li>E</li>
                </ul>
            </div>

            <div class="middleWrapper"> <!-- 居中的五個li項 -->
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>

            <div class="bottomWrapper"> <!-- 居右的五個li項 -->
                <ul>
                    <li>甲</li>
                    <li>乙</li>
                    <li>丙</li>
                    <li>丁</li>
                    <li>戊</li>
                </ul>
            </div>
        </div>

再上CSS代碼：

.container{
            border:1px solid red;
            height:160px;            
            margin:0 auto;/*在父元素內居中常用方法*/
            width:640px;
        }
        .topWrapper{
            border:1px solid blue;
            height:40px;
            margin:0 0 10px 0;
        }
        .topWrapper ul{
            list-style:none;
            margin:0;
            padding:0;
        }
        .topWrapper ul li{
            background-color:#e6e6e6;
            border:1px solid gray;
            border-radius:8px;
            display:inline-block;
            float:left;/*使自己靠左的關鍵屬性*/
            height:40px;
            line-height:40px;
            margin:0 10px 0 0;
            text-align:center;
            width:40px;
        }

        .middleWrapper{
            border:1px solid green;
            height:40px;
            margin:0 0 10px 0;
        }
        .middleWrapper ul{
            list-style:none;
            margin:0;
            padding:0;
            text-align:center;/*使子元素li居中的關鍵屬性*/
        }
        .middleWrapper ul li{
            background-color:#e6e6e6;
            border:1px solid gray;
            border-radius:8px;
            display:inline-block;
            height:40px;
            line-height:40px;
            margin:0 10px 0 0;
            text-align:center;
            width:40px;
        }

        .bottomWrapper{
            border:1px solid green;
            height:40px;
            margin:0 0 10px 0;
        }
        .bottomWrapper ul{
            list-style:none;
            margin:0;
            padding:0;
            text-align:right;/*使子元素li靠右的關鍵屬性*/
        }
        .bottomWrapper ul li{
            background-color:#e6e6e6;
            border:1px solid gray;
            border-radius:8px;
            display:inline-block;
            height:40px;
            line-height:40px;
            margin:0 0 0 10px;
            text-align:center;
            width:40px;
        }

最后是全體代碼：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>標題</title>
     <style type="text/css">
     /*CSS樣式*/
        .container{
            border:1px solid red;
            height:160px;            
            margin:0 auto;/*在父元素內居中常用方法*/
            width:640px;
        }
        .topWrapper{
            border:1px solid blue;
            height:40px;
            margin:0 0 10px 0;
        }
        .topWrapper ul{
            list-style:none;
            margin:0;
            padding:0;
        }
        .topWrapper ul li{
            background-color:#e6e6e6;
            border:1px solid gray;
            border-radius:8px;
            display:inline-block;
            float:left;/*使自己靠左的關鍵屬性*/
            height:40px;
            line-height:40px;
            margin:0 10px 0 0;
            text-align:center;
            width:40px;
        }

        .middleWrapper{
            border:1px solid green;
            height:40px;
            margin:0 0 10px 0;
        }
        .middleWrapper ul{
            list-style:none;
            margin:0;
            padding:0;
            text-align:center;/*使子元素li居中的關鍵屬性*/
        }
        .middleWrapper ul li{
            background-color:#e6e6e6;
            border:1px solid gray;
            border-radius:8px;
            display:inline-block;
            height:40px;
            line-height:40px;
            margin:0 10px 0 0;
            text-align:center;
            width:40px;
        }

        .bottomWrapper{
            border:1px solid green;
            height:40px;
            margin:0 0 10px 0;
        }
        .bottomWrapper ul{
            list-style:none;
            margin:0;
            padding:0;
            text-align:right;/*使子元素li靠右的關鍵屬性*/
        }
        .bottomWrapper ul li{
            background-color:#e6e6e6;
            border:1px solid gray;
            border-radius:8px;
            display:inline-block;
            height:40px;
            line-height:40px;
            margin:0 0 0 10px;
            text-align:center;
            width:40px;
        }
     </style>
    </head>

     <body>
        <div class="container">
            <div class="topWrapper"> <!-- 靠左的五個li項 -->
                <ul>
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                    <li>D</li>
                    <li>E</li>
                </ul>
            </div>

            <div class="middleWrapper"> <!-- 居中的五個li項 -->
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>

            <div class="bottomWrapper"> <!-- 居右的五個li項 -->
                <ul>
                    <li>甲</li>
                    <li>乙</li>
                    <li>丙</li>
                    <li>丁</li>
                    <li>戊</li>
                </ul>
            </div>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
    // 腳本
//-->
</script>

PS：最上面的間距和下面兩排明顯不一樣寬，不知原因為何，有人知道的話請留言。

END


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 使用ul li制作菜單導航，設置li水平居中顯示 css實現單行的靠左靠右和居中效果 ul li 水平居中 ul li內的文字水平居中顯示 讓ul中的li居中顯示 CSS居中問題：塊級元素和行級元素在水平方向以及垂直方向的居中問題 CSS文本靠右顯示換行后靠左顯示；vant van-col文本靠右顯示換行后靠左顯示 li 在 UL 中居中均勻顯示 使用CSS把ul,li制作成表格 js使圖片水平方向重復移動
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM