2

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

现场 小提琴

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

3 回答 3

1

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

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

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

来自MDN 文档。

因此，通过给出#containera允许在该容器内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 */
}
于 2013-06-11T07:48:07.570 回答
0

让导航栏与徽标对齐

#header nav - remove clear:both;

对于侧边栏

添加

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

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

于 2013-06-10T23:40:50.940 回答
0

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

同时删除 clear: both; 来自#header 导航

于 2013-06-10T23:53:14.747 回答