Css 当它'；让我们向左浮动

我在标题上有一个菜单和一个徽标，我正在努力使徽标位于网站左侧的远边缘，而菜单位于右侧的边缘

问题是，当它们都显示为内联块时，这意味着它们将浮动到左侧的默认方向，我想不出一种方法来改变这一点，请帮助

以下是CSS代码：

/*Header*/
.wrapperHeader{
    background-color: #FFFFFF;
    border-bottom: 1px solid #DDDDDD;

    width: 100%;
    padding: 15px 0px;
    z-index: 1000;
}

.content{
    width: 1000px;
    max-width: 100%;
    margin: auto;
}   

.header-logo, #logoImage{
    width: 250px;
    max-width: 100%;

    display: inline-block;
    vertical-align: middle;
}

/*Main Menu*/
.header-menu{
    width: 690px;
    max-width: 100%;

    display: inline-block;
    vertical-align: middle;
}

#MainMenu li{
    position: relative;
    padding: 15px;
    display: inline-block;
    right: 0px;
}

注意：在html中，徽标在一个部分中，菜单在另一个部分中，两者都在一个分隔内

HTML代码：

<header>
            <div class="wrapperHeader">
                <div class="content">
                    <section class="header-logo">
                        <a href="index.html"><img id="logoImage" src="assets/elements/logo.png" alt="LOAI Design Studio Logo"/></a>
                    </section>
                    <section class="header-menu">
                        <nav id="MainMenu"> 
                            <ul>
                                <li><a class="active" href="index.html">Home</a></li>
                                <li id="PortfolioMenu"><a id="Portfolio" href="#">Portfolio</a>
                                    <ul class="subMenu">
                                        <li><a href="web-design.html">Web Design</a></li>
                                        <li><a href="visual-identity.html">Visual Identity</a></li>
                                        <li><a href="photography.html">Photography</a></li>
                                    </ul>
                                </li>
                                <li><a href="testimonials.html">Testimonials</a></li>
                                <li><a href="about.html">About Me</a></li>
                                <li><a href="contact.html">Get In Touch</a></li>
                                <li><a class="getStartedButton" href="get-started.html">Get Started</a></li>
                            </ul>
                            <a href="#" id="SmartMenu">Menu<p id="SmartMenu-logo">LOAI Design Studio</p></a>
                        </nav>
                    </section>
                </div>
            </div>
        </header>

我会将logo部分向左浮动，将菜单部分向右浮动，然后使用clear:both清除包装。删除内联块以使其正常工作。

这里我编辑了您的CSS代码，因此您可以尝试此操作

/*Header*/
.wrapperHeader{
    background-color: #FFFFFF;
    border-bottom: 1px solid #DDDDDD;
    padding: 15px 0px;
    z-index: 1000;
    overflow: hidden;
}

.content{
    width: 1000px;
    margin: auto;
}   

.header-logo, #logoImage{
    width: 250px;
    float: left;
}

/*Main Menu*/
.header-menu{
    width: 690px;
    float: right;
}

#MainMenu ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

#MainMenu li{
    position: relative;
    padding: 5px 15px;
    float: left;
    list-style: none;
}

li#PortfolioMenu{
    padding: 0;
}

li#PortfolioMenu > a{
    padding: 5px 15px;
}

ul.subMenu{
    display: none;
    position: absolute;
}

li:hover ul.subMenu{
    display: block;
}

我使用了float:left对于徽标，浮动：右对于标题菜单，删除显示：内联块并做了一些其他修复

---

希望这将帮助您…

我相信我们需要您的html/标记来重新创建您的问题如果您使用内联块，您可能会被要求使用文本对齐：对齐。请看刚刚添加的HTML代码，谢谢！信息：从你的内联块显示：我累了，平面菜单的权利，但当我应用浮动的菜单上，a的菜单链接翻转！所以主页链接从右边开始，而不是从左边开始。谢谢你，这并没有完全解决它，但它让我看到了一些可能会有帮助的东西！我现在正在努力，希望一切顺利，谢谢。