使得<li>在一行顯示，去除浮動的方法

使得
在一行顯示，去除浮動的方法

本文轉載自查看原文 2016-08-08 22:29 11766

①<li>使用浮動的方法，但是要用div包裹起來，該父元素需要設置寬度與高度：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<style type="text/css">
    .deo1 ul{
        width:100%;/*這里設置為確定的值也可以*/
        height:20px;
        background-color:yellow;
    }
    .deo1 ul li{
        float:left;
        border:1px solid red;
        margin-right:8px;
        padding:0px;
    }    
</style>
<script>
$(function(){

});
</script>
</head>
<body>
<div class="deo1">
<ul>
<li><a href="###">這是1個</a></li>
<li><a href="###">這是2個</a></li>
<li><a href="###">這是3個</a></li>
<li><a href="###">這是4個</a></li>
<li><a href="###">這是5個</a></li>
<li><a href="###">這是6個</a></li>
<div class="clear"></div>
</ul>
</div>
<div deo2>jfsdljfklsdjfds</div>
</body>

</html>

②不用設置ul的高度，使用class=clear清除浮動

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<style type="text/css">
    ul{
        width:80%;
        background-color:yellow;
    }
    ul li{
        float:left;
        border:1px solid red;
        margin-right:8px;
        padding:0px;
    }    
    .clear{
        clear:both;
    }
</style>
<script>
$(function(){

});
</script>
</head>
<body>

<ul>
<li><a href="###">這是1個</a></li>
<li><a href="###">這是2個</a></li>
<li><a href="###">這是3個</a></li>
<li><a href="###">這是4個</a></li>
<li><a href="###">這是5個</a></li>
<li><a href="###">這是6個</a></li>
<div class="clear"></div>
</ul>

<div deo2>jfsdljfklsdjfds</div>
</body>

</html>

③不使用浮動，而是使用display:inline-block,值得注意的是<li>之間會出現間距，解決的方法是：使用css的margin-right:-8px;或者<li>元素之間不要留有空格，

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<style type="text/css">
    ul{
        width:80%;
        background-color:yellow;
    }
    ul li{
        display:inline-block;
        border:1px solid red;
        margin-right:-8px;
        padding:0px;
    }    
    
</style>
<script>
$(function(){

});
</script>
</head>
<body>

<ul>
<li><a href="###">這是1個</a></li>
<li><a href="###">這是2個</a></li>
<li><a href="###">這是3個</a></li>
<li><a href="###">這是4個</a></li>
<li><a href="###">這是5個</a></li>
<li><a href="###">這是6個</a></li>
</ul>

<div deo2>jfsdljfklsdjfds</div>
</body>

</html>

或者把<li>元素放在一行

<li><a href="###">這是1個</a></li><li><a href="###">這是2個</a></li><li><a href="###">這是3個</a></li>

免責聲明！

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

猜您在找 ul li一行兩個顯示 CSS控制一行顯示兩個li div探索系列（二）：讓多個div顯示在一行（浮動的div） CSS 去除浮動的方法 [CSS]讓ul中的li在所屬div內成一行居中顯示。 idea讓tab不在一行顯示的方法--idea技巧 css 多出一行或多行后顯示...的方法讓多個元素在一行顯示的方法和技巧(面試題) 打印字符顯示在一行的方法 - print()函數用法 CSS浮動屬性，知道原理就很簡單,靈活控制塊級元素在一行內顯示

使得在一行顯示，去除浮動的方法

免責聲明！

使得
在一行顯示，去除浮動的方法