Question

我尝试构建的网站是旧BBC布局的副本。我试图制作＆＃34;新闻＆＃34;标签向左移动，但它不会移动。我不知道问题是什么。我试过改变边距和填充。这似乎不起作用。我也尝试在某些部分将位置改为亲戚并向左做：-50。该文本刚刚移动。

图像和＆＃34;登录＆＃34;代码段中的文字无法加载，因为它们位于我的计算机上。所以只需忽略左边的空白区域。

＆＃13;

     <style type="text/css">
		
		body{
			margin:0;
		}
		#topbar{
			background-color:#700001;
			width:100%;
			height:44px;
			color:white;
			font-weight:bold;
			font-family:Ariel, Helvetica, sans serif;
			font-size:1em;
		}
		
		.fixedwidth{
			width:1050px;
			margin:0 auto;
		}
		
		#logodiv{
			padding:3px 8px 0px 0px;
			position:relative;
			left:-150px;
			float:left;
			border-right:1px #9F0003 solid;
		}
		
		#signindiv{
			position:relative;
			left:-145px;
			float:left;
			padding:2px 80px 13px 5px;
			border-right:1px #9F0003 solid;
		}
		
		#signindiv img{
			position:relative;
			top:5px;
		}
		
		#topmenudiv{
			float:left;
		}
		
		#topmenudiv ul{
			margin:13px 5px 13px 5px;
			float:left;
		}
		
		#topmenudiv li{
			list-style:none;
		}
		
    </style>

＆＃13;

<!doctype html>
<html>
<head>
    <title>Fake BBC</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" />
     
</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/signinlogo.png" /> Sign In
		</div>
			
		</div>	
		
		<div id="topmenudiv">
		
			<ul>
			
				<li>News</li>
			
			</ul>
		
		</div>
	
	</div>
	</div>

</body>
</html>

＆＃13;

Answer 1

那是因为你错过了结束

 </div>

你的缩进很糟糕。

<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/signinlogo.png" /> Sign In
                </div>
            </div>
            <div id="topmenudiv">
                <ul>
                    <li>News</li>
                </ul>
            </div>
        </div>
    </div>
</body>

或者

<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/signinlogo.png" /> Sign In
                </div>
            </div>
        </div>
        <div id="topmenudiv">
            <ul>
                <li>News</li>
            </ul>
        </div>
    </div>
</body>

我不确定你错过了哪里。虽然我很确定它是第一个。

Answer 2

试试这个，这里是https://jsfiddle.net/2Lzo9vfc/7/

使用此

更新您的CSS

    body{
        margin:0;
    }

    #topbar{
        background-color:#700001;
        width:100%;
        height:44px;
        color:white;
        font-weight:bold;
        font-family:Ariel, Helvetica, sans serif;
        font-size:1em;
    }

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

    #logodiv{
        padding:3px 8px 0px 0px;
        position:relative;
        float:left;
        border-right:1px #9F0003 solid;
    }

    #signindiv{
        position:relative;
        float:left;
        padding:8px 10px;
        border-right:1px #9F0003 solid;
    }

    #signindiv img{
        position:relative;
    }

    #topmenudiv{
        float:left;
    }

    #topmenudiv ul{
        margin:8px 10px;
        float:left;
        padding-left: 5px;
    }

    #topmenudiv li{
        list-style:none;
    }

CSS - 我的UL被困在标题中

2 个答案: