2个div在html / css中没有水平对齐 [英] 2 divs not aligning horizontally in html/css
本文介绍了2个div在html / css中没有水平对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在网页顶部有一个栏，左边是欢迎，[ipaddress]，还有一个导航栏在右边。我已经尝试了大量的网站，我无法让它们正确对齐。我的HTML：
< html >
< head >
< META HTTP-EQUIV = Pragma CONTENT = no-cache >
< META HTTP-EQUIV = 过期 CONTENT = - 1 >
< link rel = stylesheet href = index.css >
< script src = http://code.jquery.com /jquery-latest.min.js\"> < / 脚本 >
< script src = http://www.codehelper.io/api/ips/?js > < / < span class =code-leadattribute> script >
< script >
$（ function （）{
GetIPAddress（）;
}）;
function GetIPAddress（）{
$（ #username）。html（ Welcome， + codehelper_ip。 IP）;
}
< / 脚本 >
< / head >
< body >
< div class = topbar >
< div id = 用户名 >
USERNAME
< / div >
< div class = navigation < span class =code-keyword>>
< div class = nav >
link1
< / div >
< div 类 = nav >
link2
< / div >
< / div < span class =code-keyword>>
< / div >
< div class = titlebox >
< < span class =code-leadattribute> div class = title >
TITLE
< / div >
< / div > ;
< div class = subtitle >
SUBTITLE
< / div >
< / body >
< / html >
CSS：
html ， body {
background-color ： ＃000000;
颜色 ： #FFFFFF;
margin ： 0px;
font-size ： 12px;
min-width ： 1300px;
}
div 。 topbar {
background-color ： ＃0F0F0F;
width ： 100％;
height ： 40px;
padding-left ： 10px;
line-height ： 40px;
box-shadow ： 0 5px 5px -2px＃000000;
}
div 。 username {
float ： left;
width ： 50px;
}
div 。 navigation {
float ： left;
width ： 70％;
}
div 。 titlebox {
保证金 ： 10px;
float ： center;
text-align ： center;
b订单 ： 2px solid #FFFFFF;
box-shadow ： 0px 0px 10px 5px #CCCCCC inset;
}
div 。 title {
padding-top ： 20px;
padding-bottom ： 20px;
font-size ： 20px;
}
div 。 subtitle {
padding-left ： 20px;
font-size ： 16px;
}
请告诉我如何做到这一点，因为它很简单，但我的硬盘坏了，我无法得到代码我以前用过它！
解决方案
（ function （）{
GetIPAddress（） ;
}）;
function GetIPAddress（）{
（ #username）。html（ Welcome， + codehelper_ip.IP）;
}
< / 脚本 >
< / head >
< body >
< div class = topbar >
< div id = 用户名 >
USERNAME
< / div >
< div class = navigation < span class =code-keyword>>
< div class = nav >
link1
< / div >
< div 类 = nav >
link2
< / div >
< / div < span class =code-keyword>>
< / div >
< div class = titlebox >
< < span class =code-leadattribute> div class = title >
TITLE
< / div >
< / div > ;
< div class = subtitle >
SUBTITLE
< / div >
< / body >
< / html >
CSS：
html ， body {
background-color ： ＃000000;
颜色 ： #FFFFFF;
margin ： 0px;
font-size ： 12px;
min-width ： 1300px;
}
div 。 topbar {
background-color ： ＃0F0F0F;
width ： 100％;
height ： 40px;
padding-left ： 10px;
line-height ： 40px;
box-shadow ： 0 5px 5px -2px＃000000;
}
div 。 username {
float ： left;
width ： 50px;
}
div 。 navigation {
float ： left;
width ： 70％;
}
div 。 titlebox {
保证金 ： 10px;
float ： center;
text-align ： center;
b订单 ： 2px solid #FFFFFF;
box-shadow ： 0px 0px 10px 5px #CCCCCC inset;
}
div 。 title {
padding-top ： 20px;
padding-bottom ： 20px;
font-size ： 20px;
}
div 。 subtitle {
padding-left ： 20px;
font-size ： 16px;
}
请告诉我如何做到这一点，因为它很简单，但我的硬盘坏了，我无法得到代码我以前用过它！
你不能使用div.username！
改变你的一些风格：
< pre lang =cs> div＃username
{
float ：left;
宽度：200px;
}
div.navigation {
float ：left;
宽度：70％;
}
div.nav {
float ：left;
}
希望这个帮助！
Hi,
I want to have a bar at the top of the web page, with "Welcome, [ipaddress]" on the left and a navigation bar on the right. I've tried loads of sites and I can't get them to align properly. My HTML:
<html>
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<link rel="stylesheet" href="index.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://www.codehelper.io/api/ips/?js"></script>
<script>
$(function(){
GetIPAddress();
});
function GetIPAddress(){
$("#username").html("Welcome, " + codehelper_ip.IP);
}
</script>
</head>
<body>
<div class="topbar">
<div id="username">
USERNAME
</div>
<div class="navigation">
<div class="nav">
link1
</div>
<div class="nav">
link2
</div>
</div>
</div>
<div class="titlebox">
<div class="title">
TITLE
</div>
</div>
<div class="subtitle">
SUBTITLE
</div>
</body>
</html>
CSS:
html, body{
background-color: #000000;
color: #FFFFFF;
margin: 0px;
font-size: 12px;
min-width: 1300px;
}
div.topbar{
background-color: #0F0F0F;
width: 100%;
height: 40px;
padding-left: 10px;
line-height: 40px;
box-shadow: 0 5px 5px -2px #000000;
}
div.username{
float: left;
width: 50px;
}
div.navigation{
float: left;
width: 70%;
}
div.titlebox{
margin: 10px;
float: center;
text-align: center;
border: 2px solid #FFFFFF;
box-shadow: 0px 0px 10px 5px #CCCCCC inset;
}
div.title{
padding-top: 20px;
padding-bottom: 20px;
font-size: 20px;
}
div.subtitle{
padding-left: 20px;
font-size: 16px;
}
Please tell me how to do this because it's so simple but my hard drive broke and I can't get the code I used before off of it!
解决方案
(function(){ GetIPAddress(); }); function GetIPAddress(){
("#username").html("Welcome, " + codehelper_ip.IP); } </script> </head> <body> <div class="topbar"> <div id="username"> USERNAME </div> <div class="navigation"> <div class="nav"> link1 </div> <div class="nav"> link2 </div> </div> </div> <div class="titlebox"> <div class="title"> TITLE </div> </div> <div class="subtitle"> SUBTITLE </div> </body> </html>
CSS:
html, body{ background-color: #000000; color: #FFFFFF; margin: 0px; font-size: 12px; min-width: 1300px; } div.topbar{ background-color: #0F0F0F; width: 100%; height: 40px; padding-left: 10px; line-height: 40px; box-shadow: 0 5px 5px -2px #000000; } div.username{ float: left; width: 50px; } div.navigation{ float: left; width: 70%; } div.titlebox{ margin: 10px; float: center; text-align: center; border: 2px solid #FFFFFF; box-shadow: 0px 0px 10px 5px #CCCCCC inset; } div.title{ padding-top: 20px; padding-bottom: 20px; font-size: 20px; } div.subtitle{ padding-left: 20px; font-size: 16px; }
Please tell me how to do this because it's so simple but my hard drive broke and I can't get the code I used before off of it!
You cannot use div.username!
Change some of your style to this:
div#username { float: left; width: 200px; } div.navigation { float: left; width: 70%; } div.nav { float: left; }
Hope this help!
这篇关于2个div在html / css中没有水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
