如何把标志放在左边，菜单在右边

我想做一个像这个网站或这个网站的标题，我的意思是我想把标志放在左边，菜单在右边。但是我的头部在这里不能很好地浮动。我现在很困惑。

#header-right {
    float: left;
}
#header-right {
    float: right;
}

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="wrapper">
  <!-- Header -->
  <header id="header" class="header">
    <div class="container" id="header-inner">
      <div class="row">
      <div id="header-left" class="clearfix">
        <div id="logo" class="logo">
          <a href="#">
            <img src="http://i.huffpost.com/gen/4252154/images/o-EMBLEM-facebook.jpg" alt="logo" id="logo-img" class="logo-img" height="35" width="150">
          </a>
        </div>  <!-- logo  -->
      </div>  <!-- header-left -->
      <div id="header-right">
        <nav class="navbar navbar-default" id="">
   			<div class="navbar-header">
   			  <a class="navbar-brand" href="#">Apple Juice</a>
   			  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
   				<span class="icon-bar"></span>
   				<span class="icon-bar"></span>
   				<span class="icon-bar"></span>
   			  </button>
   			</div>  <!-- navbar-header -->
   			<!-- Global Navigation -->
   			<div class="gnav collapse navbar-collapse" id="navbar-main">
   			  <ul class="nav navbar-nav">
   				<li class="dropdown active">
   				  <a class="" data-toggle="dropdown" href="index.html">Home <i></i></a>
   				  <!-- Dropdown -->
   				  <ul class="dropdown-menu">
   					<li>
   					  <a class="" href='#'>ジュース <i class=""></i></a>
   					  <ul class="sub-dropdown">
      					<li><a href="#">オレンジ</a></li>
      					<li><a href="#">アップル</a></li>
      					<li><a href="#">グレープ</a></li>
      				  </ul>
      				</li>
      				<li>
      				  <a class="" href='#'>寿司 <i class=""></i></a>
      				  <ul class="sub-dropdown">
      					<li><a href="#">マグロ</a></li>
      					<li><a href="#">サーモン</a></li>
      					<li><a href="#">エンガワ</a></li>
      				  </ul>
      				</li>
      			  </ul>  <!-- dropdown-menu -->
      			</li>  <!-- dropdown active-->
      			<li class="dropdown">
      			  <a class="" data-toggle="dropdown" href="index.html">items <i class="fa fa-angle-down" aria-hidden="true"></i></a>
      			  <ul class="dropdown-menu">
      				<li>
      				  <a class="" href='#'>スマートフォン <i class=""></i></a>
      				  <ul class="sub-dropdown">
      					<li><a href="#">iPhone</a></li>
      					<li><a href="#">Xperia</a></li>
      					<li><a href="#">Galaxy</a></li>
      				  </ul>
      				</li>
      				<li>
      				  <a class="" href='#'>野菜 <i class=""></i></a>
      				  <ul class="sub-dropdown">
      					<li><a href="#">トマト</a></li>
      					<li><a href="#">レタス</a></li>
      					<li><a href="#">枝豆</a></li>
      				  </ul>
      				</li>
      			  </ul>  <!-- dropdown-menu -->
      			</li>  <!-- dropdown -->
      			<li class="dropdown">
      			  <a class="" data-toggle="dropdown" href="index.html">order <i></i></a>     
  				  <ul class="dropdown-menu">
   					<li><a class="" href='#'>自分用</a></li>
     				<li><a class="" href='#'>他人用</a></li>
     			  </ul>  <!-- dropdown-menu -->
      			</li>  <!-- dropdown -->
            	<li class="dropdown">
	              <a class="" data-toggle="dropdown" href="index.html">contact <i></i></a>
    		      <ul class="dropdown-menu">
           		    <li><a class="" href='#'>フォーム</a></li>
	                <li><a class="" href='#'>電話</a></li>
    	          </ul>  <!-- dropdown-menu -->
          		</li>  <!-- dropdown -->
    		  </ul>  <!-- nav navbar-nav -->
    		</div>  <!-- gnav collapse navbar-collapse -->
          </nav>  <!-- navbar navbar-default  -->
        </div>  <!-- header-right -->
        </div>  <!-- clearfix -->
      </div>  <!-- row -->
    </div>  <!-- container -->
  </header>
</div>  <!-- wrapper -->

啊，我通常在<div class="row">中使用clearfix，而不是在<div id="header-left">中使用<header>，但我在<div id="header-left">中写了

你的CSS是错误的，请替换为

#header-left {
        float: left;
        display: inline-block;
    }

这将确保你的左块只占用适合它的区域

您可以使用.navbar-right类:

使用.navbar-left或.navbar-right工具类对齐导航链接、表单、按钮或文本。这两个类都将在指定的方向上添加CSS浮动。例如，要对齐导航链接，请将它们放在单独的<ul>中，并应用各自的实用程序类。

请检查结果。这是你想要达到的目标吗?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header"><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="" class="navbar-brand">Brand</a>
    </div>
    <div id="bs-navbar" class="collapse navbar-collapse">
       <ul class="nav navbar-nav navbar-right">
        <li><a href="">Right 1</a></li>
        <li><a href="">Right 2</a></li>
        <li><a href="">Right 3</a></li>
      </ul>
    </div>
  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

更新

我在你的代码中使用<ul class="nav navbar-nav navbar-right">而不是<ul class="nav navbar-nav">:

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="wrapper">
  <!-- Header -->
  <header id="header" class="header">
    <div class="container" id="header-inner">
      <div class="row">
      <div id="header-left" class="clearfix">
        <div id="logo" class="logo">
          <a href="#">
            <img src="http://i.huffpost.com/gen/4252154/images/o-EMBLEM-facebook.jpg" alt="logo" id="logo-img" class="logo-img" height="35" width="150">
          </a>
        </div>  <!-- logo  -->
      </div>  <!-- header-left -->
      <div id="header-right">
        <nav class="navbar navbar-default" id="">
   			<div class="navbar-header">
   			  <a class="navbar-brand" href="#">Apple Juice</a>
   			  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
   				<span class="icon-bar"></span>
   				<span class="icon-bar"></span>
   				<span class="icon-bar"></span>
   			  </button>
   			</div>  <!-- navbar-header -->
   			<!-- Global Navigation -->
   			<div class="gnav collapse navbar-collapse" id="navbar-main">
   			  <ul class="nav navbar-nav navbar-right">
   				<li class="dropdown active">
   				  <a class="" data-toggle="dropdown" href="index.html">Home <i></i></a>
   				  <!-- Dropdown -->
   				  <ul class="dropdown-menu">
   					<li>
   					  <a class="" href='#'>ジュース <i class=""></i></a>
   					  <ul class="sub-dropdown">
      					<li><a href="#">オレンジ</a></li>
      					<li><a href="#">アップル</a></li>
      					<li><a href="#">グレープ</a></li>
      				  </ul>
      				</li>
      				<li>
      				  <a class="" href='#'>寿司 <i class=""></i></a>
      				  <ul class="sub-dropdown">
      					<li><a href="#">マグロ</a></li>
      					<li><a href="#">サーモン</a></li>
      					<li><a href="#">エンガワ</a></li>
      				  </ul>
      				</li>
      			  </ul>  <!-- dropdown-menu -->
      			</li>  <!-- dropdown active-->
      			<li class="dropdown">
      			  <a class="" data-toggle="dropdown" href="index.html">items <i class="fa fa-angle-down" aria-hidden="true"></i></a>
      			  <ul class="dropdown-menu">
      				<li>
      				  <a class="" href='#'>スマートフォン <i class=""></i></a>
      				  <ul class="sub-dropdown">
      					<li><a href="#">iPhone</a></li>
      					<li><a href="#">Xperia</a></li>
      					<li><a href="#">Galaxy</a></li>
      				  </ul>
      				</li>
      				<li>
      				  <a class="" href='#'>野菜 <i class=""></i></a>
      				  <ul class="sub-dropdown">
      					<li><a href="#">トマト</a></li>
      					<li><a href="#">レタス</a></li>
      					<li><a href="#">枝豆</a></li>
      				  </ul>
      				</li>
      			  </ul>  <!-- dropdown-menu -->
      			</li>  <!-- dropdown -->
      			<li class="dropdown">
      			  <a class="" data-toggle="dropdown" href="index.html">order <i></i></a>     
  				  <ul class="dropdown-menu">
   					<li><a class="" href='#'>自分用</a></li>
     				<li><a class="" href='#'>他人用</a></li>
     			  </ul>  <!-- dropdown-menu -->
      			</li>  <!-- dropdown -->
            	<li class="dropdown">
	              <a class="" data-toggle="dropdown" href="index.html">contact <i></i></a>
    		      <ul class="dropdown-menu">
           		    <li><a class="" href='#'>フォーム</a></li>
	                <li><a class="" href='#'>電話</a></li>
    	          </ul>  <!-- dropdown-menu -->
          		</li>  <!-- dropdown -->
    		  </ul>  <!-- nav navbar-nav -->
    		</div>  <!-- gnav collapse navbar-collapse -->
          </nav>  <!-- navbar navbar-default  -->
        </div>  <!-- header-right -->
        </div>  <!-- clearfix -->
      </div>  <!-- row -->
    </div>  <!-- container -->
  </header>
</div>  <!-- wrapper -->

相关内容

最新更新

热门标签：