Question

以下是我的代码。我的问题在于：

<html>
<head>
    <title>My BBC News Reader</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css">

    body {
        margin:0;
        font-family:arial, helvetica, sans-serif;
    }

    #topbar {
        background-color:#7A0000;
        width:100%;
        height:40px;
        color:white;
    }

    .fixedwidth {
        width:1050px;
        margin:0 auto;
    }

    #logodiv {
        padding-top:5px;
        float:left;
        border-right:1px solid #990000;
        padding-right:10px;
    }

    #signindiv {
        font-weight:bold;
        font-size:0.9em;
        padding: 6px 80px 12px 20px;
        float:left;
        border-right:1px solid #990000;
    }

    #signindiv img {
        position:relative;
        top:3px;
    }

    #topmenudiv {
        float:left;
    }

    #topmenudiv ul {
        padding:0;
        margin:0;
    }

    #topmenudiv li {
        list-style:none;
        font-weight:bold;
        font-size:0.9em;
        border-right:1px solid #990000;
        height:100%;
        padding:10px 20px 12px 20px; 
        float:left;
    }

    #searchdiv {
        padding:5px 0 0 10px;
        float:left;

    }

    #searchdiv input {
        height:25px;
        border:none;
        padding-left:10px;
        background-image:url("images/glass.png");
        background-repeat:no-repeat;
        background-position:right center;
    }


    </style>

</head>
<body>
    <div id="container">

        <div id="topbar">

            <div class="fixedwidth">

                <div id="logodiv">

                    <img src="images/bbclogo.png"/>

                </div>

                <div id="signindiv">

                    <p><img src="images/signin.png" width="18px" height="18px"/>Sign    in</p>

                </div>

                <div id="topmenudiv">

                    <ul>
                        <li>News</li>
                        <li>Sport</li>
                        <li>Weather</li>
                        <li>iPlayer</li>
                        <li>TV</li>
                        <li>Radio</li>
                        <li>More...</li>
                    </ul>

                </div>

                <div id="searchdiv">

                    <input type="text" placeholder="Search"/>

        </div>
    </div>
</body>
</html>

为了表明，我在这里上传了代码 - http://www.mazdoor.net/bbcnews.html。一旦我解决了问题，我将删除。 1.垂直边界线突出。我无法弄清问题是什么。 2.登录徽标和文字未与BBC徽标对齐。

请帮助我。我刚刚在4天前启动了HTML和CSS。

谢谢

Answer 1

这是因为填充是在列表项上设置的。

试试这个：

#topmenudiv li {
  list-style: none;
  font-weight: bold;
  font-size: 0.9em;
  border-right: 1px solid #990000;
  height: 100%;
  padding: 0px 20px;
  float: left;
  line-height: 35px;
}

这将删除填充的高度，并使用line-height设置文本的垂直高度。

Answer 2

这是正确的代码

<html>
<head>
    <title>My BBC News Reader</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css">

    body {
        margin:0;
        font-family:arial, helvetica, sans-serif;
    }

    #topbar {
        background-color:#7A0000;
        width:100%;
        height:auto;
        color:white;
    }

    .fixedwidth {
        width:1050px;
        margin:0 auto;
    }

    #logodiv {
        padding-top:15px;
        float:left;
        border-right:1px solid #990000;
        padding-right:10px;
        min-height: 53px;
    }

    #signindiv {
        font-weight:bold;
        font-size:0.9em;
        padding: 6px 80px 12px 20px;
        float:left;
        border-right:1px solid #990000;
    }

    #signindiv img {
        position:relative;
        top:3px;
    }

    #topmenudiv {
        float:left;
    }

    #topmenudiv ul {
        padding:0;
        margin:0;
    }

    #topmenudiv li {
        list-style:none;
        font-weight:bold;
        font-size:0.9em;
        border-right:1px solid #990000;
        /*height:100%;*/
        padding:26px 20px; 
        float:left;
    }

    #searchdiv {
        padding:5px 0 0 10px;
        float:left;

    }

    #searchdiv input {
        height:25px;
        border:none;
        padding-left:10px;
        background-image:url("images/glass.png");
        background-repeat:no-repeat;
        background-position:right center;
    }

    .clear{float:none !important;clear:both;}
    ul li:last-of-type{padding:0px !important;border:none;height:0px !important;}
    </style>

</head>
<body>
    <div id="container">

        <div id="topbar">

            <div class="fixedwidth">

                <div id="logodiv">
                    <img src="images/bbclogo.png"/>
                </div>

                <div id="signindiv">
                    <p><img src="images/signin.png" width="18px" height="18px"/>Sign    in</p>
                </div>

                <div id="topmenudiv">
                    <ul>
                        <li>News</li>
                        <li>Sport</li>
                        <li>Weather</li>
                        <li>iPlayer</li>
                        <li>TV</li>
                        <li>Radio</li>
                        <li>More...</li>
                        <li class='clear'></li>
                    </ul>
                </div>

                <div id="searchdiv">
                    <input type="text" placeholder="Search"/>
                </div>

                <div class='clear'></div>
            </div>
    </div>
</body>
</html>

在这里我所做的所有事情很难解释，我简要解释了一下。研究代码......并尝试理解

1. <li class='clear'></li>添加ul中的清除浮点数 <div class='clear'></div>添加清除浮点数fixedwidth div

将topbar div height更改为auto，以根据内部内容获取topbar高度。

#topmenudiv li填充更改padding: 26px 20px，然后其高度将与signindiv高度相等。

删除#topmenudiv li height然后#topmenudiv li身高将自动为高度。（如果#topmenudiv li{height:auto;}列出的项目获得全屏高度）

2。要垂直对齐徽标，只需将填充顶部值添加到logodiv。您必须使用您的视线检查它是否与注销徽标对齐。

Answer 3

删除

#topmenudiv li{
  height: 100%; <!--- remove
}

#signindiv p{
  margin:0; <!--- remove default margin given by browser
}

边界伸出顶部栏

3 个答案: