如何将我的HTML组件与CSS对齐？
我正在为巴西制作地图+功能，我希望将右侧的“Anuncieaquiégrátis”图像与欢迎文本对齐，以便图像和欢迎文本与文本对齐“信息“下面。我该怎么办？我或许可以用表来实现它，但我认为CSS可以更好。我有一个开始，如果我只能调整my design的东北部分，那么我会接近完成。
<body onload="initialize()">
<div class="container_12">
<div id="mainCol" class="grid_12">
<div id="header">
<div id="navbar">
</div>
<div id="logo-wrap">
<table><tr><td>
<div id="logo-img"><a class="nobk" href="/ai"><img src="/_/img/montao.gif" alt="Market Logo"/></a><ul>
<li><a href="li">{% now "d M" %}</a></li>
<li>{% if user %}<a href="{{ user_url|fix_ampersands }}">{% trans "Log out" %}</a>
{% else %}<li><a href="/login">{% trans "Log in" %}{% endif %}</a></li>
</ul>
</td><td>
<a href="ai"><img src="/_/img/anuncio.gif" alt=""/></a>
<div id="user-ident">
<span>{% trans "Welcome," %} <b>{{user.nickname}}</b></span>
</div>
</td></tr></table>
</div>
<div id="logo-text"><h1 style="display:none">Market</h1>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div id="map_canvas" style="height: 400px; position: relative; background-color: rgb(229, 227, 223);">
</div>
<div class="container_12">
<div class="grid_6">
<div class="title1">{% trans "Post a photo" %}</div>
<div class="countries_list">
<form method="post" action="{{form_url}}" enctype="multipart/form-data"> <div>
<input type="file" name="file" /><input type="submit" value="{% trans "Go" %}" /></div> </form>
</div>
</div>
<div class="grid_6">
<div class="title1">Information</div><div>
<a href="sao_paulo">São Paulo</a>
<br> <a href="rio_de_janeiro">Rio de Janeiro</a>
<br> <a href="espirito_santo">Espírito Santo</a>
<br> <a href="minas_gerais">Minas Gerais</a>
<br> <a href="parana">Paraná</a>
<br><a href="santa_catarina">Santa Catarina</a>
<br><a href="li?lat=-23.33&lon=-46.38">Rio Grande do Sul</a>
<br><a href="bahia">Bahia</a>
<br> <a href="pernambuco">Pernambuco</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Ceará</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Rio Grande do Norte</a>
<br><a href="li?lat=-23.33&lon=-46.38">Amazonas</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Distrito Federal</a>
<br><a href="li?lat=-23.33&lon=-46.38">Pará</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Maranhão</a>
<br><a href="li?lat=-23.33&lon=-46.38">Goiás</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Paraíba</a>
<br><a href="li?lat=-23.33&lon=-46.38">Alagoas</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Piauí</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Mato Grosso</a>
<br><a href="li?lat=-23.33&lon=-46.38">Mato Grosso do Sul</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Sergipe</a>
<br><a href="li?lat=-23.33&lon=-46.38">Rondônia</a>
<br><a href="li?lat=-23.33&lon=-46.38">Tocantins</a>
<br><a href="li?lat=-23.33&lon=-46.38">Acre</a>
<br><a href="li?lat=-23.33&lon=-46.38">Amapá</a>
<br> <a href="li?lat=-23.33&lon=-46.38">Roraima</a></div>
<div class="link_to_profile"> </div>
</div>
</div>
<div class="clear"></div>
<div class="container_12">
<div class="grid_12">
<div id="footer">
©2011 <a href="http://montao.com.br" title="Montao">Montao.com.br</a>
</div>
</div>
</div>
</body>
/* @override http://localhost:8000/static/css/style.css */
@import url("960.css");
@import url("reset.css");
@import url("text.css");
@import url("uni-form-generic.css");
@import url("uni-form.css");
h1, h2, h3, h4, h5, h6, h7, h8 {
text-shadow: #fff 1px 1px 1px;
}
a {}
a:link {color: #750006;}
a:visited {color:#0D1826;}
a:hover {color: #d2e0f7; background-color:#2C4F66; text-decoration:none}
.nobk:hover {
background:none;
}
body {
font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
font-size: 12px;
margin: 0px;
color:#2C4F66;
background-color:#ffffef;
line-height:1.3;
}
#main_content {
background: yellow;
}
#footer {
background-color:#99b3cc;
color:#2C4F66;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 15px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
//text-shadow: #fff 1px 1px 1px;
}
#mainCol ul {
list-style:none;
margin:10px 0 10px 0;
padding:0;
}
#mainCol li {
display:inline;
margin:0 0 0 1px;
padding:0;
}
#mainCol li a:link, #mainCol li a:visited {
text-decoration:none;
font-size:1.3em;
font-weight:bold;
color: #fe0403;
background-color:#fff7aa;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 2px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
text-shadow: #000 1px 1px 1px;
}
#mainCol li a:hover {
color:#fe0403;
background-color:#e2f3b8;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 2px;
text-shadow: #000 1px 1px 1px;
}
.mapContainer #gmap {
height: 400px;
border-top: 2px solid #8D9BA1;
border-bottom: 2px solid #8D9BA1;
}
.mapContainer2 #gmap {
height: 300px;
overflow:hidden;
}
.title1 {
font-size: 20px;
margin-top: 20px;
margin-bottom: 20px;
background-color:#99b3cc;
color:#2C4F66;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
text-shadow: #fff 1px 1px 1px;
}
/* ========== A view =========== */
#contact_info {
background-color:#d2e0f7;
color:#2C4F66;
padding: 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
}
#contact_info h6{
font-size: 12px;
}
.tag {
font-weight:bold;
color: #d2e0f7;
background-color:#8D9BA1;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 2px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
text-shadow: #666 1px 1px 1px;
}
a:hover .tag {
background-color: #2C4F66;
text-decoration: none;
}
a:visited .tag {
color: #FFF
}
/* ========== DEV Info ============*/
.dev_avatar {
float:left;
}
#dev-info {
padding-left:220px;
}
.dev_name {
font-size: 36px;
font-weight: bold;
text-shadow: #fff 1px 1px 1px;
}
.dev_location {
font-size: 18px;
}
.dev-result{
font-size:18px;
width: 32%;
float: left;
}
.countries_list dt {
font-size: 14px;
font-weight: bold;
}
.countries_list dd a{
font-size: 12px;
text-decoration: none;
}
.link_to_profile {
font-size: 14px;
height: 25px;
width: 49%;
float: left;
}
/* Debug class */
.show {
background-color:pink;
}
/* Mugur CSS Starts Here */
.ybox{
background-color:#d2e0f7;
color:#2C4F66;
padding: 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
}
#header {
margin-bottom:20px;
position:relative;
}
#logo-wrap{
position:relative;
width:480px;
}
#logo-text{
position:absolute;
top:70px;
left:150px;
}
#logo-text h1{
font-size:24px;
font-weight:bold;
color:#2C4F66;
text-shadow: #cccccc 1px 1px 1px;
}
#user-ident {
float:right;
clear:both;
position:relative;
text-align:right;
background-color:#d2e0f7;
color:#2C4F66;
padding-left: 6px;
padding-right: 6px;
padding-top: 2px;
padding-bottom: 2px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
text-shadow: #fff 1px 1px 1px;
}
#navbar{
float:right;
clear:both;
}
#tags {
line-height:2;
}
#dev_bio {
font-size:18px;
}
/* Forms */
.uniForm fieldset {
border:1px solid #DFDFDF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
padding: 5px;
}
.uniForm fieldset legend {
font-size: 1.5em;
}
/*** Stats */
#countries_map {
margin-left: auto;
margin-right: auto;
}
2 个答案:
答案 0 :(得分：2)
#navbar没有正确对齐，因为它下面的Google广告会将其推回。您可以做的是在导航栏内，您可以将它们包含在另一个div中：
<div id="navbar">
<div class="navwrapper">
<a href="ai"><img src="/_/img/anuncio.gif" /></a>
<ul>
[...]
</ul>
</div>
</div>
而你的CSS有：
#navbar .navwrapper {
float: right;
}
答案 1 :(得分：1)
我不确定我是否完全理解你，如果你将图像编辑成你想要的样子，可能会更容易。
这使得欢迎文本和消息位于右侧站点，但最多只能达到940px。由于某些东西设置了容器的宽度。
#navbar{
text-align:right;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？