html - 无法让两个 div 水平对齐

Question

我费尽心机试图让两个 div 标签对齐。我已经在这里阅读了一页又一页的解决方案，但我无法让其中任何一个发挥作用。我不确定这是否与使用 MVC 的 Visual Studio 元素有关。这似乎不太可能，但我想我会提到它。所以这是公司网站上的标题栏。 Logo 应在左侧，菜单应在右侧。它必须是响应式的。到目前为止，这是我得到的:

header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
}
logo {
    float: none;
    width: 215px;
}


nav {
    width: 100%;
    height: 100%;
    float: left;
}

nav ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}

nav li {
    display: inline;
    padding: 20px;
}

nav a {
    text-decoration: none;
    color: #171581;
    padding: 8px 8px 8px 8px;
}

nav a:hover {
    color: #D60053;
}

这是 HTML

<div style="opacity: 1;" class="wrapper">
    <header class="">
        <div class="container">
            <div class="logo">
                <a href="/" class="glyphicon-log-out top-menu">
                    <img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
                </a>
            </div>
            <div class="hamburger"></div>
            <nav>
                <ul>
                    <li><a href="#" class="top-menu">About</a></li>
                    <li><a href="#" class="top-menu">Residential &amp; Business</a></li>
                    <li><a href="#" class="top-menu">My Accounts Details</a></li>
                    <li><a href="#" class="top-menu faqs active">FAQ</a></li>
                    <li><a href="#" class="top-menu">Contact us</a></li>
                </ul>
            </nav>
        </div>
    </header>

Answer 1

像这样更改您的 CSS(注意 .logo 中添加的点)

.logo {
    float: left;
    width: 215px;
}
nav {
    margin-left: 215px;
}

header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
}
.logo {
    float: left;
    width: 215px;
}
nav {
    margin-left: 215px;
}
nav ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}

nav li {
    display: inline;
    padding: 20px;
}

nav a {
    text-decoration: none;
    color: #171581;
    padding: 8px 8px 8px 8px;
}

nav a:hover {
    color: #D60053;
}

<div style="opacity: 1;" class="wrapper">
    <header class="">
        <div class="container">
            <div class="logo">
                <a href="/" class="glyphicon-log-out top-menu">
                    <img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
                </a>
            </div>
            <div class="hamburger"></div>
            <nav>
                <ul>
                    <li><a href="#" class="top-menu">About</a></li>
                    <li><a href="#" class="top-menu">Residential &amp; Business</a></li>
                    <li><a href="#" class="top-menu">My Accounts Details</a></li>
                    <li><a href="#" class="top-menu faqs active">FAQ</a></li>
                    <li><a href="#" class="top-menu">Contact us</a></li>
                </ul>
            </nav>
        </div>
    </header>