Question

我整天都被困在这个问题上我正在尝试制作一个左侧有徽标的标题和右侧的列表然后我希望它通过徽标下方的导航来调整大小我知道这个工作但是当我调整到大宽度时，我的nav仍然低于徽标。

我是网络开发的新手，所以任何建议都会受到高度赞赏。

<!DOCTYPE html>
<html>
  <head>
    <title> Website</title>
    <!-- links -->
    <link rel="stylesheet" href="style copy.css" type="text/css" />
  </head>
  <body class="body">
    <!--  Main Menu  -->
    <div id="mainMenu" class="mainMenu">
      <div class="logo"></div>
        <nav class="rightThenMid">
          <ul>
            <li class="active first"><a href="#home">HOME</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
      </div>
    </body>
  </html>

AND CSS

body {
  clear: both;
}

.body {
  clear: both; 
  margin:0;
  padding:0; 
}

.mainMenu {
  width: 100%;
  height: 70px;
  background-color: #121212;
  z-index: 10; 
}

.mainMenu nav {
  height: 90px;
}

.mainMenu nav ul {
  height: 100%;
}

.mainMenu nav ul li {
  display: inline-block;
  height: 100%;
  font: 11px/6.36em "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.25em;
  list-style-type: none;
  text-transform: uppercase;
}

.mainMenu nav ul li.first a {
  padding-left: 0px;
}

.mainMenu nav ul li.last a {
  padding-right: 0px;
}

.mainMenu nav a {
  display: block;
  padding-left: 18px;
  padding-right: 18px;
  text-decoration: none;
  color: #fff; 
}

.mainMenu nav ul li a:hover, .mainMenu nav ul li.active a {
  color: #6159c1;
}

.rightThenMid {
 float: right;   
}

.logo {
  display: inline-block;
  width: 300px;
  height: 70px;
  background-image: url('img/companyLogo.png');
  background-repeat: no-repeat;
  margin: auto;
}

ul, li, nav, p {
  margin:0;
  padding:0;
  border:0;
  outline: none;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

nav ul,ul,ol {
  list-style:none;
}

@media only screen and (min-width : 150px) and (max-width : 700px) {
  .body {
    clear: both; 
    margin: 0 auto; 

  }

  .mainMenu {
    height: 140px;
  }

  .mainMenu nav ul {
    height: 100%;
    display: inline-block;
    list-style-type: none;
  }

  .rightThenMid {
    display:block;
    margin:0 auto;
    text-align:center;
    float: none;
  }

  .logo {
    display:  block;
    margin:auto;
    width: 300px;
    height: 70px;
    background-image: url('img/companyLogo.png');
    background-repeat: no-repeat;
  }

}

Answer 1

您可以在没有媒体查询的情况下向.logo float: left提供float: none，并在媒体查询中提供.rightThenMid。

我认为问题是，您刚刚给.logo一个浮点而不是.logo { ... float: left; } @media only screen and (min-width : 150px) and (max-width : 700px) { .logo { ... float: none; } }。

Working Fiddle

{{1}}

调整nav上的问题，刷新修复它

1 个答案: