Question

我拉着我的头发试图让两个div标签对齐。我已经在这里逐页阅读解决方案，但我还没有能够让它们中的任何一个工作。我不确定这是否与使用MVC的Visual Studio项目有关。这似乎不太可能，但我想我会提到它。所以这是公司网站上的标题栏。徽标应位于左侧，菜单应位于右侧。它必须是敏感的。这是我到目前为止所得到的：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您的代码中存在许多问题：

logo应该是.logo来引用徽标的类。
属性float:none应设置为float:left;，以便正确浮动。
对于导航，您不应指定width:100%，因为它将被强制占用标题的整个宽度，例如，您需要将其设置为auto。 LI>

这是一个有效的代码：

＆＃13;

header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffffff;
}
.logo {
  float: left;
  width: 215px;
}
nav {
  width: auto;
  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;
}

＆＃13;

<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>

＆＃13;

Answer 3

1.您的代码格式错误。我已将其格式化。

2..logo应设置为“float：left”。

3..container应该有“overflow：hidden”

我也把你的李直接做了。（我已经把它做成了一行）

这包含您的html格式代码，Css，您可能需要更改以及添加

<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">
        <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>

    </div>
  </header>
</div>

你的css代码：

* {
  margin: 0px;
  padding: 0px;
}
header{
  width:700px;
  margin:0 auto;
}
.container {
  overflow: hidden;
}

.logo {
  float: left;
  margin-right:100px;
}

.hamburger {
  /* float: left; */
  overflow: hidden;
}

li {
  float: left;
  padding: 5px;
  list-style-type: none;
}

希望这是你所期待的

无法获得两个div来水平对齐

3 个答案: