Question

我有以下问题，我的div争辩不想正确对齐。正如你在图片上看到的那样，我的左侧菜单/ blured /位于左侧+我使用了边距，因此它不像列中那样彼此不在一起，但现在没关系。菜单链接应与右/整个div对齐，位于左侧，当我尝试使用css float：right;它向右移动但内容与左对齐，所以当我使用与左侧相同的边距时，我无法使菜单对称。了解？我正在努力，请帮忙。

的jsfiddle＆GT;＆GT; HERE

Picture

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＆GT;

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;
}

Answer 1

这样的事情？（根据评论修订）

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

修改后的代码：复制，粘贴，保存，启动。这应该是你想要的

<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>

将div内容对齐+使用右边的边距

2 个答案: