Question

我有以下HTML代码。我已经适当地尝试将父容器div #header及其中的子项#header1和#header2分别对齐。但是当我尝试最小化窗口时，父容器似乎不是集中对齐的，而且即使在将宽度明确地设置为父容器的width:50%;之后，子标题似乎也会折叠。为什么会这样？请解释并帮我解决这个问题。另请注意，它下方的水平导航栏似乎也与我上面提到的相同的bug有关。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    *{
        margin:0px;
        padding:0px;
    }  
    <!--Resetter rules for browsers-->
    #bodyContainer {
    }
    body {
        border:black 2px solid;
        background-color : grey;
        padding:5px;
    }
    #header {
        margin:10px auto;
        background-color : red;
        width:70%;
        height:80px;    
        -webkit-border-radius:15px;
        -moz-border-radius:15px;
        border-radius:15px;
    }
    #header1 {  
        display:inline-block;
        width:50%;
        text-align:center;
        line-height:80px;           
    }
    #header2 {
        display:inline-block;
        width:50%;
        text-align:center;
        line-height:80px;
    }
    #navmenu {
        list-style-type:none;
        background-color:#444;
        border:black 2px solid;         
        text-align:center;
        margin-bottom:20px;
    }
    #content {
    }
    #nav {
    }
    #navmenu li {
        border:black 1px solid;
        background:yellow;
        border-radius:5px;
        height:30px;
        line-height:30px;
        width:33%;
        display:inline-block
    }
    #navmenu li a {
        text-decoration:none;           
        display:block;
    }
</style>
</head>
<body>
<div id="bodyContainer">
    <div id="header">
        <div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>           
    </div>
    <div id="content">
        <div id="contentHeader">
            <p>You Select ... We Serve </p>
        </div>
        <div id="nav">
            <ul id="navmenu">
                <li><a href="#">Home</a></li><li><a href="#">Electronics</a></li><li><a href="#">Fashions</a></li>                  
            </ul>
        </div>
    </div>
    <div id="sidebar">
    </div>
    <div id="footer">
        <p>WebApp Version Numbered v1.0. All rights Reserved. </p>
    </div>
</div>
</body>
</html>

Answer 1

#header上的固定高度阻止了文字在较小的屏幕上显示，因为没有足够的空间。我删除了它，因此高度是动态的。

还在#header1和#header2左右添加了一些边距，这样他们就不会互相粘贴。

可以使用box-sizing和width: 33.33%

修复水平菜单项折叠

Jsfiddle

有关盒子大小的更多信息，请点击此处： http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

希望这会有所帮助。

Answer 2

问题是您在display: inline-block和#header1这两个元素中都有#header2，因此HTML实际上是预期的行为。我在两个元素中更改了display:inline-block float: left;，但您仍需要进行更多更改才能获得所需的外观。如果您希望网站具有响应性，则应查看有关Responsive Design和Media Queries

的一些教程

＆＃13;

*{
        margin:0px;
        padding:0px;
    }  
    <!--Resetter rules for browsers-->
    #bodyContainer {
    }
    body {
        border:black 2px solid;
        background-color : grey;
        padding:5px;
    }
    #header {
        margin:10px auto;
        background-color : red;
        width:70%;
        height:80px;    
        -webkit-border-radius:15px;
        -moz-border-radius:15px;
        border-radius:15px;
    }
    #header1 {  
        float: left;
        width:50%;
        text-align:center;
        line-height:80px;           
    }
    #header2 {
        float: left;
        width:50%;
        text-align:center;
        line-height:80px;
    }
    #navmenu {
        list-style-type:none;
        background-color:#444;
        border:black 2px solid;         
        text-align:center;
        margin-bottom:20px;
    }
    #content {
    }
    #nav {
    }
    #navmenu li {
        border:black 1px solid;
        background:yellow;
        border-radius:5px;
        height:30px;
        line-height:30px;
        width:33%;
        display:inline-block
    }
    #navmenu li a {
        text-decoration:none;           
        display:block;
    }

＆＃13;

<div id="bodyContainer">
    <div id="header">
        <div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>           
    </div>
    <div id="content">
        <div id="contentHeader">
            <p>You Select ... We Serve </p>
        </div>
        <div id="nav">
            <ul id="navmenu">
                <li><a href="#">Home</a></li><li><a href="#">Electronics</a></li><li><a href="#">Fashions</a></li>                  
            </ul>
        </div>
    </div>
    <div id="sidebar">
    </div>
    <div id="footer">
        <p>WebApp Version Numbered v1.0. All rights Reserved. </p>
    </div>
</div>

＆＃13;

为什么最小化窗口导致HTML元素从父容器本身消失？

2 个答案: