Question

有人可以帮我把我的菜单放在导航栏旁边的左边。如您所见，图标浮动在导航栏上方，从而延伸顶栏，顶栏内的图标和导航都需要彼此相邻对齐。

body{
	margin: 0;
	padding: 0;
}

#top-bar{
	background-color: black;
	padding: 1%;
	width: auto;
}

#left-menu{
	display: inline-block;	
}

#navigation{
	width: 100%;
	text-align: center;
	background-color: red;
}

#navigation ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
	position: relative;
	display: inline-block;
	overflow: hidden;
}

#navigation ul li{
	float: left;
}

#navigation ul li a{
	text-decoration: none;
	margin-left: 5px;
}

<body>
		
		<div id="top-bar">
			<div id="left-menu">
				<img src="icons/menu.png"/>
			</div>

			<div id="navigation">
				<ul>
					<li><a class="link" href="#"> Home 	   </li>
					<li><a class="link" href="#"> About Us </li>
					<li><a class="link" href="#"> Contact  </li>
				</ul>
			</div>
		</div>

	</body>

Answer 1

您要执行的操作是从width: 100%移除#navigation，而是将其float: left。{/ p>

您还忘记关闭<a>代码。

我已在以下内容中解决了这个问题：

＆＃13;

body {
  margin: 0;
  padding: 0;
}

#top-bar {
  background-color: black;
  padding: 1%;
  width: auto;
}

#left-menu {
  display: inline-block;
}

#navigation {
  /* width: 100%; */
  float: left;
  text-align: center;
  background-color: red;
}

#navigation ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#navigation ul li {
  float: left;
}

#navigation ul li a {
  text-decoration: none;
  margin-left: 5px;
}

＆＃13;

<body>
  <div id="top-bar">
    <div id="left-menu">
      <img src="http://placehold.it/100" />
    </div>
    <div id="navigation">
      <ul>
        <li><a class="link" href="#">Home</a></li>
        <li><a class="link" href="#">About Us</a></li>
        <li><a class="link" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</body>

＆＃13;

如果您想确保它们的高度相同，那么您需要为#navigation line-height属性提供等于图像高度的属性，以及{ {1}}。这可以在以下内容中看到：

＆＃13;

display: block

＆＃13;

body {
  margin: 0;
  padding: 0;
}

#top-bar {
  background-color: black;
  padding: 1%;
  width: auto;
}

#left-menu {
  display: inline-block;
}

#navigation {
  /* width: 100%; */
  float: left;
  text-align: center;
  background-color: red;
}

#navigation ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
  position: relative;
  /* display: inline-block; */
  display: block;
  line-height: 100px; /* Equal to the height of the image */
  overflow: hidden;
}

#navigation ul li {
  float: left;
}

#navigation ul li a {
  text-decoration: none;
  margin-left: 5px;
}

＆＃13;

希望这有帮助！：）

菜单与导航栏对齐

1 个答案: