我有以下问题，我的div争用不想向右对齐。正如你在图片上看到的，我的左侧菜单/bluered/在左边+我使用了边距，所以它不像在一列中那样在彼此下面，但现在无关紧要了。菜单链接应该向右对齐/整个div/，在左边，当我尝试使用css float时：right；它向右，但内容向左对齐，所以当我使用与左侧相同的边距时，我无法使菜单对称。懂我正在挣扎，请帮帮我。
jsfiddle>>此处
图片
HTML:
<body>
<div id="tabulka">
<!-- LAVE MENU -->
<a class="uvod" href="uvod.html" target="_self">■ Uvod</a>
<a class="tim" href="uvod.html" target="_self">■ Tim</a>
<a class="sluzby" href="uvod.html" target="_self">■ Sluzby</a>
<!-- PRAVE MENU -->
<a class="kontakty" href="uvod.html" target="_self">Kontakty ■</a>
<a class="ref" href="uvod.html" target="_self">Referencie ■</a>
<a class="odkazy" href="uvod.html" target="_self">Odkazy ■</a>
<!-- STRED LOGO, JAZYKY -->
<div id="logo">
<img src="imgs/logo2.svg" title="Logo" alt="alt">
</div>
</div>
<div>
<div id="switch">
<img class="lang" src="imgs/sk.svg" title="SK" alt="alt">
<img class="lang" src="imgs/en.svg" title="EN" alt="alt">
<img class="lang" src="imgs/de.svg" title="DE" alt="alt">
</div>
</div>
</body>
CSS>
html {
height: 100%;
}
body{
background-image: url("imgs/repeat.gif");
background-repeat: repeat-x;
width: 1024px;
background-color: #B20035;
margin: 0 auto;
}
a{
color: #fff;
font-size: 16pt;
font-family: Arial;
text-decoration: none;
}
#tabulka{
background-image: url("imgs/fidal.jpg");
background-repeat: no-repeat;
width: 1024px;
height: 600px;
}
#logo{
width: 250px;
height: 250px;
margin: 0 auto;
padding-top: 40px;
}
#switch{
margin: 0 auto;
width: 70px;
}
.uvod{
position: absolute;
margin-left: 100px;
margin-top: 100px;
}
.tim{
position: absolute;
margin-left: 150px;
margin-top: 200px;
}
.sluzby{
position: absolute;
margin-left: 200px;
margin-top: 300px;
}
#right{
float: right;
width: 0px;
}
.kontakty{
text-align: right;
position: absolute;
margin-right: 0px;
margin-top: 100px;
}
.ref{
position: absolute;
margin-left: 4px;
margin-top: 200px;
}
.odkazy{
position: absolute;
margin-left: 4px;
margin-top: 300px;
}
这样的东西？（根据意见修订）
html {
height: 100%;
}
body{
background-image: url("imgs/repeat.gif");
background-repeat: repeat-x;
width: 1024px;
background-color: lightgray;
margin: 0 auto;
}
a{
color: #fff;
font-size: 16pt;
font-family: Arial;
text-decoration: none;
}
#tabulka{
background-image: url("imgs/fidal.jpg");
background-repeat: no-repeat;
width: 1024px;
height: 600px;
}
#logo{
width: 250px;
height: 250px;
margin: 0 auto;
padding-top: 40px;
}
#switch{
margin: 0 auto;
width: 70px;
}
.menu {
margin-top:50px;
float:right;
padding-right:10px;
}
.odkazy {
margin-left: 20px;
}
.sluzby {
margin-left: -110px;
}
.ref{
margin-left: 65px;
}
.tim{
margin-left: -135px;
}
.kontakty{
margin-left: 115px;
}
.uvod{
margin-left: -160px;
}<div id="tabulka">
<div class="menu">
<!-- LAVE MENU -->
<a class="uvod" href="uvod.html" target="_self">■ Uvod</a>
<a class="kontakty" href="uvod.html" target="_self">Kontakty ■</a>
<br/><br/>
<a class="tim" href="uvod.html" target="_self">■ Tim</a>
<a class="ref" href="uvod.html" target="_self">Referencie ■</a>
<br/><br/>
<a class="sluzby" href="uvod.html" target="_self">■ Sluzby</a>
<a class="odkazy" href="uvod.html" target="_self">Odkazy ■</a>
<!-- PRAVE MENU -->
</div>
<!-- STRED LOGO, JAZYKY -->
<div id="logo">
<img src="imgs/logo2.svg" title="Logo" alt="alt"/>
</div>
</div>
<div>
<div id="switch">
<img class="lang" src="imgs/sk.svg" title="SK" alt="alt"/>
<img class="lang" src="imgs/en.svg" title="EN" alt="alt"/>
<img class="lang" src="imgs/de.svg" title="DE" alt="alt"/>
</div>
</div> 修改后的代码：复制、粘贴、保存、启动。这应该是你想要的
<head>
<style type="text/css">
body{
background-image: url("imgs/repeat.gif");
background-repeat: repeat-x;
width: 1024px;
background-color: #B20035;
margin: 0 auto;
}
a{
color: #fff;
font-size: 16pt;
font-family: Arial;
text-decoration: none;
}
#tabulka{
background-image: url("imgs/fidal.jpg");
background-repeat: no-repeat;
width: 1024px;
height: 600px;
}
#logo{
width: 250px;
height: 250px;
margin: 0 auto;
padding-top: 40px;
}
.left a,
.right a {
display:block;
margin-top:50px;
}
#switch{
margin: 0 auto;
width: 70px;
}
.left {
float:left;
text-align:left;
}
.right{
float:right;
text-align:right;
}
#uvod{
margin-left: 100px;
margin-top: 100px;
}
#tim{
margin-left: 150px;
}
#sluzby{
margin-left: 200px;
}
#kontakty{
margin-right: 100px;
margin-top: 100px;
}
#ref{
margin-right: 150px;
}
#odkazy{
margin-right: 200px;
}
</style>
</head>
<body>
<div id="tabulka">
<!-- LAVE MENU -->
<div class="left">
<a id="uvod" href="uvod.html" target="_self">■ Uvod</a>
<a id="tim" href="uvod.html" target="_self">■ Tim</a>
<a id="sluzby" href="uvod.html" target="_self">■ Sluzby</a>
</div>
<!-- PRAVE MENU -->
<div class="right">
<a id="kontakty" href="uvod.html" target="_self">Kontakty ■</a>
<a id="ref" href="uvod.html" target="_self">Referencie ■</a>
<a id="odkazy" href="uvod.html" target="_self">Odkazy ■</a>
</div>
<!-- STRED LOGO, JAZYKY -->
<div id="logo">
<img src="imgs/logo2.svg" title="Logo" alt="alt">
</div>
</div>
<div id="switch">
<img class="lang" src="imgs/sk.svg" title="SK" alt="alt">
<img class="lang" src="imgs/en.svg" title="EN" alt="alt">
<img class="lang" src="imgs/de.svg" title="DE" alt="alt">
</div>
</body>