Question

我刚刚开始进行HTML / CSS开发，并且我正在尝试构建我的第一个WordPress主题，但我对HTML和CSS有一些问题。

我想要完成的是在左侧显示图像的标题（使用float：left）和另外两个图像，另一个超链接和右侧的搜索字段（浮动：右侧））。

当我移除浮子时：左;从.log-wrapper中，显示徽标，但右侧的元素被向下推一行。我读到这是由于显示：阻止。但是当我添加浮动：左后卫时，图像完全消失。

为什么会这样？我该如何解决这个问题？

<div id="site-header-container">

        <header id="site-header" class="site-header" role="banner">

            <div id="header-wrapper" class="header-wrapper">

                <div id="logo-wrapper" class="logo-wrapper">
                    <!--Site Logo-->
                    <a class="home-link-logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                    </a>
                </div>

                <div id="outer-social-wrapper" class="outer-social-wrapper">
                    <div id="social-wrapper" class="social-wrapper">
                        <div id="languages-wrapper" class="languages-wrapper">
                            <!--Languages-->
                            US
                            NL
                        </div>
                        <div id="contact-wrapper" class="contact-wrapper">
                            <!--Contact-->
                            CONTACT
                        </div>
                        <div id="search-wrapper" class="search-wrapper">
                            <!--Search Form-->
                            SEARCH
                        </div>
                    </div>
                </div>
            </div>

        </header>

    </div>

.logo-wrapper {
    float: left;
}

.home-link-logo {
    background: url("images/logo.jpg") no-repeat;
    display: block;
    max-width: 1000px;
    min-height: 82px;
}

.outer-social-wrapper {
    float: right;
}

.languages-wrapper {
    float: left;
}

.contact-wrapper {
    float: left;
}

.search-wrapper {
    float: left;
}

Answer 1

.logo-wrapper, .languages-wrapper, .contact-wrapper, .search-wrapper {
    display: inline-block;
}
.home-link-logo {
    position: absolute;
    background: url("https://www.apple.com/imac/images/buystrip_retail.png") no-repeat;
    top: 0;
    width: 130px!important;
    height: 120px!important;
    max-width: 1000px;
    min-height: 82px;

}
.outer-social-wrapper {
    float: right;
}

将浮动设置为左时，图像消失

1 个答案: