Question

我有3个元素（徽标，导航，社交图标），所有这些元素都在我需要水平对齐的不同div中。我已经尝试了浮动，清除，填充，边距等的各种组合，似乎没有什么工作正常。我错过了什么？

HTML

<div id="header">
        <a class="logo" href="#"><img src="<?php bloginfo('template_url');?>/img/logo.png" alt="logo" /></a>
        <nav>
            <?php wp_nav_menu( array('menu' => 'nav' )); ?>
        </nav><!-- end nav -->

    </div><!-- end header -->
<div id="sidebar">
    <div class="social">
        <ul>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/instagram.png" alt="instagram" /></a>
                <ul>
                    <li><a href="http://instagram.com/#/">a</a></li>
                    <li><a href="http://instagram.com/#/">b</a></li>
                </ul>
            </li>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/youtube.png" alt="youtube" /></a>
                <ul>
                    <li><a href="http://www.youtube.com/user/#">a</a></li>
                    <li><a href="http://www.youtube.com/user/#">b</a></li>
                </ul>
            </li>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/facebook.png" alt="facebook" /></a>
                <ul>
                    <li><a href="http://www.facebook.com/#">a</a></li>
                    <li><a href="http://www.facebook.com/#">b</a></li>
                </ul>
            </li>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/twitter.png" alt="twitter" /></a>
                <ul>
                    <li><a href="https://twitter.com/#">a</a></li>
                    <li><a href="https://twitter.com/#">b</a></li>
                </ul>
            </li>
            <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/lockerz.png" alt="lockerz" /></a>
                <ul>
                    <li><a href="http://lockerz.com/u/#">a</a></li>
                    <li><a href="http://lockerz.com/u/#">b</a></li>
                </ul>
            </li>
        </ul>
    </div><!-- end social -->

CSS

#header {
    height: 40px;
    padding-bottom: 40px;
    padding-top: 80px;
    vertical-align: middle;
    width: 700px;
}

#header .logo {
    display: block;
    float: left;
    width: 285px;
    height: 40px; /*added*/
}

#header .logo:hover {
    background: url('img/logo_hover.png') no-repeat;
}

#header .logo img {
    display: block;
}

#header .logo:hover img {
    display: none;
}

#header nav {
    clear: both;
    float: right;
    padding-left: ;
    padding-top: 10px;
}

#header nav ul li {
    display: inline;
}

#header nav ul li a {
    color: #333333;
    font-family: amatic;
    font-size: 150%;
    padding-right: 25px;
}

#header nav ul li a:hover {
    color: #c6e000;
}

#header nav ul li a:last-child {
    padding-right: none;
}

#header nav .current-menu-item a {
    color: #c6e000;
}

/* Sidebar */

#sidebar {
    clear: both;
    float: right;
    width: 230px;
}

#sidebar .social {
    float: right;
    list-style: none;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-right: 23px;
}

#sidebar .social ul {
    position: relative;
}

#sidebar .social ul li {
    display: inline-block;
}

#sidebar .social ul li ul {
    display: none;
    padding: 0;
}

#sidebar .social ul li a {
    display: inline;
    padding-left: 6px;
    font-size: 75%;
    white-space: nowrap;
}

#sidebar .social ul li:hover ul {
    display: block;
    position: absolute;
}

#sidebar .social ul li:hover ul li {
    background: #c6e000;
    display: block;
    text-align: right;
}

Answer 1

作为浮动内容的替代方法，您可以使用定位将侧边栏移动到内容的右侧。

通过进行以下更改，您可以更好地控制元素的放置位置，因为position:absolute表示：

将其放置在相对于最近定位的祖先或包含块的指定位置。

来自MDN documentation。

所以通过给#container position允许元素

中的元素绝对定位。

#container {
    margin: 80px auto 0; /* move the 80px padding from the content to the whole container */
    position: relative;  /* enables absolute position to work */
}

#header {
    padding-top: 80px;   /* remove */
}

#sidebar {
    clear: both;         /* remove */
    float: right;        /* remove */
    margin-top: -83px;   /* remove */
    width: 230px;        /* keep */
    position: absolute;  /* add absolute positioning */
    right: 0;            /* on the right */
    top: 0;              /* at the top */
}

Answer 2

让导航栏与徽标对齐

#header nav - remove clear:both;

侧边栏

添加

#sidebar {margin-top:-114px; }

这是一个针对社交图标的hacky解决方案。可能值得增加标题的宽度并将社交按钮添加到标题div。

Answer 3

您应该将流div嵌套在标题内，然后您可以操纵侧边栏以使其与标题对齐。

同时删除clear：both;来自#header nav

水平对齐单独div中的元素

3 个答案: