Question

我是一名新手开发者，并且在尝试让我的网站topicmenu部分与其上方的上述maroon新闻栏部分进行横向对齐时，确实需要一些帮助。这可能是一个简单的解决方案，但我作为一个新手真的发现它很难。你可以通过下面的jsbin url看到代码，它给出了代码和输出：

    body{
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}

#topbar{
	background-color: #FFFFFF;
	width: 100%;
	height: 40px;
	color: black;
}

.fixedwidth{
	width: 1050px;
	margin: 0 auto;
}

#logodiv{
	padding-top: 5px;
	float: left;
	border-right: 1px solid;
	padding-right: 10px;
}

#signindiv{
	padding-top: 5px 80px 10px 20px;
	font-weight: bold;
	font-size: 0.9em;
	width: 200px;
	float: left;
	border-right: 1px solid;
}

#signindiv img{
	position: relative;
	top: 5px;
}

#topmenudiv{
	float: left;
}

#topmenudiv ul{
	margin-top: 10px;
	padding: 0;
}

#topmenudiv li{
	list-style: none;    /* removes bullet points, numbers etc */
	font-weight: bold;
	font-size: 0.9em;
	border-right: 1px solid;
	height: 100%;
	padding: 7px 20px 0px 20px;
	display: inline; /* makes the list appear horizontal*/
}

#searchdiv{
	float: left;
	padding: 5px 0 0 10px;
}

#searchdiv input{
	height: 15px;
	padding: 1px;
	padding-left: 10px;
}

.break{
	clear: both;
}

#newsbar{
	background-color: #BB1919;
	width: 100%;
	height: 101px;
	color: white;
}

#newsbar p {
	margin: 0;
	padding: 0;
	padding-top: 10px;
}

#newsheader {
	font-size: 3em;
}

#UK {
	font-size: 0.5em;
	
}

#rss{
	float: right;
	margin-top: -30px;
}

#topicmenu{
	width: 100%;
}

#topicmenu ul {
	background-color: #A91717;
	padding: 0;
	menu: 0;
	height: 20px;
	
}

#topicmenu li{
	list-style: none;
	font-size: 0.8em;
	padding: 5px;
	border-right: 1px solid right;
	float: left;
}

<!DOCTYPE HTML>
<html>
<head>
<title>BBC Homepage</title>
</head>

<body>
    <div id="container">
        <div id="topbar">
            
            <div class="fixedwidth">
                <div id="logodiv">
                    <img src="images/bbclogo.png"/>
                </div>
                <div id="signindiv">
                    <img src="images/signin.png"/> Sign In
                    
                    
                
                </div>
            
            </div>
            
            <div id="topmenudiv">
                        <ul>
                            <li> News </li>
                            <li> Sport </li>
                            <li> Weather </li>
                            <li> Shop </li>
                            <li> Earth </li>
                            <li> Travel </li>
                            <li> More... </li>
                        </ul>
                    
                    </div>
            
            <div id="searchdiv">
                <input type="text" placeholder="Search"/>
            </div>
            
        </div>
        
        <div class="break"> </div>
        
        <div id="newsbar">
            
            <div class="fixedwidth">
                <p id="newsheader"> NEWS <span id="UK">UK</span> </p>
                
                <div id="rss">
                 RSS
                </div>
                
                <div class="break"> </div>
                
                <div id="topicmenu">
                    <ul>
                        <li>Home</li>
                    </ul>
                </div>
            </div>
            
        </div>    
        
    </div>
</body>
</html>

https://jsbin.com/zufilusudi/edit?html,output

非常感谢您给我的任何建议或帮助。

Answer 1

您的元素大小相同，红色背景来自父元素#newsbar，而不是来自#newsheader元素。

这里出现了混乱：

您的底部元素看起来大小不同实际上是从父元素溢出，所以它不再具有相同的背景，因为它在#newsbar之外显示

在#newsbar上设置高度：自动，您可以看到正在进行的操作，然后您可以相应地调整代码。希望这会有所帮助。

Answer 2

您的#newsbar有height: 101px

如果您只是删除此高度设置或将其设置为“自动”，则主题菜单会在底部排列。

Answer 3

尝试以下元素顺序：

<div id="newsbar">
            <div class="fixedwidth">
                <p id="newsheader"> NEWS <span id="UK">UK</span> </p>
                <div id="rss">
                 RSS
                </div>
                <div class="break"> </div>
            </div>                
             <div id="topicmenu">
                 <div class="fixedwidth">
                   <ul>
                     <li>Home</li>
                  </ul>
             </div>
           </div>
    </div>

这会将#topicmenu移出.fixedwidth DIV（允许它跨越整个宽度），但将其内容放在另一个.fixedwidth DIV中，将内容与上面元素的内容对齐

CSS菜单对齐问题 - 新手开发人员

3 个答案: