Question

我有一个带有图像的标题和一个＆＃34;汉堡＆＃34;移动导航菜单的图标。我只想尝试这样做，在可用屏幕的大约75％处显示我的徽标，并在最右边显示菜单图标。

我有一个主div容器，然后在其中我有2个div，左侧div中有徽标，右侧是菜单图标。出于某种原因，我无法让菜单保持在同一个div容器的右侧。有什么建议吗？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style>
      #container {
        width: 100%;
        max-width: 100%;
        border: 0px;
        margin: 0px;
        padding: 10px;
        background-color: blue;
      }
      #logoContainer {
        width: 75%;
        max-width: 75%;
        border: 0px;
        margin: 0px;
        background-color: blue;
      }
      #logo {
        width: auto;
        max-width: 90%;
        min-width: 90%;
      }
      #menu {
        float: right;
      }
      #mobileMenu {
        width: 100%;
        background-color: green;
        color: white;
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="logoContainer">
        <img id="logo" src="content/logo.png"/>
      </div>
      <div id="menu">
        <button type="button"><span>Menu</span></button>
      </div>
    </div>
    <div id="mobileMenu">some content</div>
  </body>
</html>

Answer 1

使用#logoContainer

为#menu和display:inline-block;提供特定宽度

#logoContainer{
  width:75%;
  display:inline-block;
  }
#menu{
  width:25%;
  display:inline-block;
  text-align: right;
  }
#menu button{
  margin-right:10px
  }

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>
    #container {
        width: 100%;
        max-width: 100%;
        border: 0px;
        margin: 0px;
        padding: 10px;
        background-color: blue;
    }

    #logoContainer {

        width: 75%;
        max-width: 75%;
        border: 0px;
        margin: 0px;
        background-color: blue;
    }

    #logo {

        width: auto;
        max-width: 90%;
        min-width: 90%;
    }

    #menu{

        float: right;
    }

    #mobileMenu {

        width: 100%;
        background-color: green;
        color: white;
        display: none;
    }
    </style>





</head>
<body>

<div id="container">
    <div id="logoContainer">

        <img id="logo" src="content/logo.png" />

    </div>

    <div id="menu">
        <button  type="button">
            <span>
                Menu
            </span>
        </button>

    </div>

    </div>

    <div id="mobileMenu">
    some content

   </div>



    </body>


    </html>

Answer 2

如何使用媒体查询来显示徽标。在我的例子中，我将#logo的显示设置为“none”。使用我的媒体查询，每当页面达到最小宽度800px时，它将显示#logo元素。

<div id="container">
<div id="logoContainer">

    <img id="logo" src="content/logo.png" />

</div>

<div id="menu">
    <button  type="button">
        <span>
            Menu
        </span>
    </button>

</div>

</div>

<div id="mobileMenu">
some content

#container {
    width: 100%;
    max-width: 100%;
    border: 0px;
    margin: 0px;
    padding: 10px;
    background-color: blue;
}

#logoContainer {

    width: 75%;
    max-width: 75%;
    border: 0px;
    margin: 0px;
    background-color: blue;
}

#logo {
    display:none;
    width: auto;
    max-width: 90%;
}

#menu{

    float: right;
}

#mobileMenu {

    width: 100%;
    background-color: green;
    color: black;
    display: none;
}

@media (min-width:800px){
  #logo{display:block;}
}

Answer 3

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style>
        body{
            margin: 0px;
        }
        #container {
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            border: 0px;
            margin: 0px;
            padding: 10px;
            background-color: red;
        }

        #logoContainer {
            float: left;
            width: 75%;
            max-width: 75%;
            border: 0px;
            margin: 0px;
            background-color: blue;
        }

        #logo{
            max-width: 75%;
            border: 0px;
            margin: 0px;
        }

        #menu{
            height: 10px;
            width: 25%;
            float: right;
            background: yellow;
        }

        #mybtn{
            float: right;
        }

        #mobileMenu {
            display: inline;
            background-color: green;
            color: white;
        }
        </style>
    </head>
    <body>

    <div id="container">

        <div id="menu">
               <button  type="button" id="mybtn">
                <span>
                    Menu
                </span>
            </button>
            <div id="mobileMenu">
            some content
            </div>
        </div>

        <div id="logoContainer">
            <img id="logo" src="content/logo.png" />
        </div>

    </div>

        </body>
        </html>

响应头的CSS定位

3 个答案: