一.ul和li標簽示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
         ul {
            border: 1px solid red;
        } 
        li {
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div id="playList">
        <ul>
            <li>視頻1</li>
            <li>視頻2</li>
            <li>視頻3</li>
        </ul>
    </div>
</body>
</html>

二.marging和padding對list-style-type的影響

如果設置了

* {

margin:0;

padding: 0;

}

，那么列表樣式會消失。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        ul {
            border: 1px solid red;
            list-style-type: none;
            padding:0;
        } 
        li {
            border: 1px solid green;
            display: inline;
        }
    </style>
</head>
<body>
    <div id="playList">
        <ul>
            <li>視頻1</li>
            <li>視頻2</li>
            <li>視頻3</li>
        </ul>
    </div>
</body>
</html>

View Code

三.取消列表標志

指定列表標志的是CSS的list-style-type屬性，所以要取消列表標志只需要設置ul或者li標簽的list-style-type屬性的值為none即可。雖然取消掉了，但是空白間隔依然存在。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        ul {
            border: 1px solid red;
            list-style-type: none;
        } 
        li {
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div id="playList">
        <ul>
            <li>視頻1</li>
            <li>視頻2</li>
            <li>視頻3</li>
        </ul>
    </div>
</body>
</html>

View Code

如果要空白間隔，可以設置ul的padding值為0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        ul {
            border: 1px solid red;
            list-style-type: none;
            padding: 0;
        } 
        li {
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div id="playList">
        <ul>
            <li>視頻1</li>
            <li>視頻2</li>
            <li>視頻3</li>
        </ul>
    </div>
</body>
</html>

View Code

三.css布局：水平導航欄

1.方式一：display:inline

通過設置將塊級元素li設置為內聯元素實現。

inline:將元素顯示為內聯元素(如<span>)。任何高度和寬度屬性都不會有影響

View Code

2.方式二：float:left

通過設置css的float屬性實現，設置float會消除margin，被設置的元素之間不再有間隔。

float:

float屬性指定元素應如何浮動。

注意：絕對定位的元素會忽略該float屬性！

注意：浮動元素后面的元素將圍繞它流動。要避免這種情況，請使用 clear屬性或clearfix hack

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        ul {
            border: 1px solid red;
            list-style-type: none;
            padding: 0;
        } 
        li {
            border: 1px solid green;
            float:left;
        }
    </style>
</head>
<body>
    <div id="playList">
        <ul>
            <li>視頻1</li>
            <li>視頻2</li>
            <li>視頻3</li>
        </ul>
    </div>
</body>
</html>

View Code

如上圖所示，float屬性會導致li標簽浮動到ul標簽之外。因為當一個元素只包含浮動元素的時候，它會出現高度折疊，即元素的上下底邊重合，和高度為0效果一樣，可以通過設置ul標簽的overflow屬性值為hidden, 防止li元素出現在列表ul之外。

overflow屬性指定了當內容溢出元素框時應發生的情況。

此屬性指定當元素的內容太大而無法放入指定區域時是截斷內容還是添加滾動條。

注意：該overflow屬性僅適用於具有指定高度的塊元素。

hidden:溢出部分被截斷，其余內容將不可見。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        ul {
            border: 1px solid red;
            list-style-type: none;
            padding: 0;
            overflow: hidden;
        } 
        li {
            border: 1px solid green;
            float:left;
        }
    </style>
</head>
<body>
    <div id="playList">
        <ul>
            <li>視頻1</li>
            <li>視頻2</li>
            <li>視頻3</li>
        </ul>
    </div>
</body>
</html>

View Code

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #playList {
            width: 100%;
        }
        ul {
            /* border: 1px solid red; */
            list-style-type: none;
            padding: 0;
            overflow: hidden;
            background-color: aquamarine;
        } 
        li {
            /* border: 1px solid green; */
            float:left;
            width: 300px;
        }
        li:last-child{
            float: none;
            width: auto;
        }
        a {
            display: block;
            font-weight:bold;
            font-size: 20px;
            color:#FFFFFF;
            background-color:#bebebe;
            text-align:center;
            padding:4px;
            text-decoration:none;
        }
        a:hover {
            background-color:#cc0000;
        }
    </style>
</head>
<body>
    <div id="playList">
        <ul>
            <li><a href="#">視頻1</a></li>
            <li><a href="#">視頻2</a></li>
            <li><a href="#">視頻3</a></li>
        </ul>
    </div>
</body>
</html>