ul居右的问题

最新推荐文章于 2021-05-30 21:17:14 发布

HOOLOO

最新推荐文章于 2021-05-30 21:17:14 发布

阅读量5.9k

点赞数 1

文章标签： float div header css

本文链接：https://blog.csdn.net/HOOLOO/article/details/2946453

版权

用ul制作的横向列表在对齐方面很麻烦,靠ul本身的CSS属性没办法让其居右,只有再外面加一个div或是span才能用float做到.而外层的text-align对其也没有用.

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#header {
    margin: 0;
    vertical-align: bottom;
    height: 20px;
    line-height: 20px;
}
#header #span1 {
    float: right;
}
#header ul {
    margin: 0;
    list-style-type: none;
    height: auto;
    width: auto;
}

#header li {
    float: left;
    text-align: center;
    margin-left: 6px;
}
</style>
</head>
<body>
    <div id="header">
        <span id="span1">
            <ul>
                <li>aaaaaa</li>
                <li>222222</li>
                <li>ffffff</li>
                <li>4f4f4d</li>
            </ul>
        </span>
    </div>
</body>
</html>
 

div要设置行高,如果设成auto的话下面的内容会占用它的地方.
要想让ul居中只有让div居中.
一定要设置div的宽度,然后margin-left,margin-right都是auto.div就自动居中了.

HOOLOO

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
ul居右的问题

用ul制作的横向列表在对齐方面很麻烦,靠ul本身的CSS属性没办法让其居右,只有再外面加一个div或是span才能用float做到.而外层的text-align对其也没有用."-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"http://www.w3.org
复制链接

扫一扫