Question

Screenshot

我的问题：我想将菜单栏放在徽标图像旁边，然后将它们（徽标和菜单）对齐到页面中心（#wrapper）。我尝试过使用表格，但它没有用。该网页使用css媒体查询。

＆＃13;

@charset "utf-8";
 #wrapper {
  margin: 0 auto;
  margin-top: -15px;
  max-width: 1020px;
  width: 97%;
  background-color: #FFF;
  border: 1px solid #000;
  border-radius: 2px;
  box-shadow: 0 0 10px 0px rgba(12, 3, 25, 1.8);
}
#slider {
  overflow: hidden;
  text-align: center;
  min-width: 320px;
  height: auto;
  width: 100%;
}
#slider img {
  width: inherit;
}
#header {
  min-height: 150px;
  overflow: hidden;
  z-index: 5;
  background-color: #fff;
  width: 100%;
  display: inline;
}
#header img {
  width: 218px;
  height: 139px;
}
nav {
  width: auto;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
/*Create a horizontal list with spacing*/

li {
  display: inline-block;
  float: left;
  margin-right: #CF0;
}
/*Style for menu links*/

li a {
  display: block;
  min-width: 150px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
  background: #34D675;
  text-decoration: none;
}
/*Hover state for top level links*/

li:hover a {
  background: #99D829;
}
/*Style for dropdown links*/

li:hover ul a {
  background: #f3f3f3;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}
/*Hover state for dropdown links*/

li:hover ul a:hover {
  background: #19c589;
  color: #fff;
}
/*Hide dropdown links until they are needed*/

li ul {
  display: none;
}
/*Make dropdown links vertical*/

li ul li {
  display: block;
  float: none;
}
/*Prevent text wrapping*/

li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}
/*Display the dropdown on hover*/

ul li a:hover + .hidden,
.hidden:hover {
  display: block;
}
/*Style 'show menu' label button and hide it by default*/

.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding: 10px 0;
  display: none;
}
/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}
/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked ~ #menu {
  display: block;
}
/*Responsive Styles*/

@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/
  ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  ul li,
  li a {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }
}

＆＃13;

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NFF - Sri Lanka</title>
</head>

<body>
  <div id="wrapper">
    <div id="header">

      <nav>
        <a href="#">
          <img src="file:///E|/NFF -Website/images/nfflogo.jpg" alt="NFF Sri Lanka Logo" width="218" height="139" title="NFF Sri Lanka Logo">
        </a>

        <label for="show-menu" class="show-menu">Show</br>Menu</label>
        <input type="checkbox" id="show-menu" role="button">

        <ul id="menu">
          <li><a href="#">HOME</a>
          </li>
          <li><a href="#">INFO ￬</a>
            <ul class="hidden">
              <li><a href="#">National Rainforests</a>
              </li>
              <li><a href="#">Aninmals & Plants</a>
              </li>
              <li><a href="#">Nature Convservation</a>
              </li>
            </ul>
          </li>
          <li><a href="#">BLOG</a>
          </li>
          <li><a href="#">ABOUT ￬</a>
            <ul class="hidden">
              <li><a href="#">Our Mission & Vision</a>
              </li>
              <li><a href="#">Membership</a>
              </li>
              <li><a href="#">Donate us</a>
              </li>
            </ul>
          </li>

        </ul>
      </nav>
    </div>

    <div id="slider">

      <img src="images/slider.jpg" alt="NFF Sri Lanka slider" title="NFF Sri Lanka Slider">

    </div>
  </div>
  <p style="text-align:center; padding:0px;">&copy; Copyright 2014 - Damitha N. Wanniarachchi</p>
</body>

</html>

＆＃13;

Answer 1

试试吧，

Html代码： -

<nav>
      <h1>
        <a href="#">
          <img src="contectIcon.png" alt="NFF Sri Lanka Logo" width="218" height="139" title="NFF Sri Lanka Logo">
        </a>
        </h1>

        <label for="show-menu" class="show-menu">Show</br>Menu</label>
        <input type="checkbox" id="show-menu" role="button">

        <ul id="menu">
          <li><a href="#">HOME</a>
          </li>
          <li><a href="#">INFO ￬</a>
            <ul class="hidden">
              <li><a href="#">National Rainforests</a>
              </li>
              <li><a href="#">Aninmals & Plants</a>
              </li>
              <li><a href="#">Nature Convservation</a>
              </li>
            </ul>
          </li>
          <li><a href="#">BLOG</a>
          </li>
          <li><a href="#">ABOUT ￬</a>
            <ul class="hidden">
              <li><a href="#">Our Mission & Vision</a>
              </li>
              <li><a href="#">Membership</a>
              </li>
              <li><a href="#">Donate us</a>
              </li>
            </ul>
          </li>

        </ul>
      </nav>

在CSS中添加类

定制CSS： -

 nav h1{
        float: left;
    }
    nav ul{
        float: left;
        margin: 40px 0 0 10px;
    }

媒体： -

@media screen and (max-width: 760px) {
    nav ul , nav h1{
        float: none;
}
    #header img{
        display: block;
        margin: 0 auto;
    }    
}

希望它会对你有所帮助！

css菜单还有其他问题

1 个答案: