Question

我正在网站上工作，但我试图在右侧设置导航栏并且效果很好，但是当我试图给<ul>一个颜色时如果我移除float:right;它只能起作用，它不会给它颜色。

有人知道怎么做吗？

<!DOCTYPE html>
<html>
    <head>
        <title>Home</title>

        <link rel="stylesheet" type="text/css" href="styling.css">
    <head>
    <body>
        <div class="navi">
            <ul>
                <li>Contact</li>
                <li>Portfolio</li>
                <li>About</li>
                <li>Home</li>
            </ul>
        </div>
    </body>
</html>

    div.navi li {
    font-size:30px;
    display:inline-block;
    width:12%;
    float:right;
}

div.navi {
    background-color:red;
}

Answer 1

您的div应该有一些width和height

div.navi li {
    font-size:20px;
    padding-right:10px;
    float:right;
}

.navi {
    background-color:red;
    width:100%;
    height:20px;
}

ul{
  list-style:none;
}

    <div class="navi">
            <ul>
                <li>Contact</li>
                <li>Portfolio</li>
                <li>About</li>
                <li>Home</li>
            </ul>
        </div>

Answer 2

div.navi { 
    background: red; 
    float: right; 
    width: 12%; 
}

div.navi li { 
    font-size: 30px; 
    display: inline-block; 
}

请尝试

Answer 3

由于div.navi仅包含浮动元素，因此它没有自己的任何高度（即高度为0），因此您看不到任何背景颜色。

要避免这种情况（并让div.navi包裹li元素），请将overflow: auto添加到div.navi

div.navi li {
  font-size: 30px;
  display: inline-block;
  padding: 0 10px 5px 10px;
  float: right;
}

div.navi {
  background-color: red;
  overflow: auto;
}

<div class="navi">
  <ul>
    <li>Contact</li>
    <li>Portfolio</li>
    <li>About</li>
    <li>Home</li>
  </ul>
</div>

我的导航栏不想上色

3 个答案: