html - 将div内容对齐到右边+使用右边距

我有以下问题，我的div竞争不希望向右对齐。如您在图片上所看到的，我的左侧菜单/ blured /在左侧+我使用了页边距，因此它不会像列中那样位于彼此下方，但是现在不再重要了。菜单链接应该在右边/ whole div /对齐，在左边，当我尝试使用css float时：right;它向右移动，但内容向左对齐，因此当我使用与左侧相同的页边距时，无法使菜单对称。了解？我正在努力，请帮忙。

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

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>

关于html - 将div内容对齐到右边+使用右边距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28441246/