html - 是否可以将图像放在左侧，将列表的其余部分放在导航栏的右侧？

Question

我正在尝试将徽标设置在左侧，将列表的其余部分设置在右侧。

我尝试将其从其中删除并自行添加。即使 z-index= 2，它也会出现在文本后面。我尝试了 a 并将其浮动到我在另一个线程中找到的左侧。仍然没有工作

* {
	font-family: arial, sans-serif; 
	box-sizing: border-box;}

html, body {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: black;
}

.nav {
	position: fixed; 
	top: 0; 
	left: 0;
	background-color: rgba(255,255,255,.8);
	border-radius: 0px;
	border: none;
	width: 100%;
	margin: 0;
	padding: 25px 0;
	flex-direction: row;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.item {
	color: black;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 15px;
	margin-left: 30px;
	margin-right: 30px;
}

<nav>
	<ul class="nav">
		<li class="item">
			<a href="index.html">
				<img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home" align="left"/>
			</a>
		</li>
		
		<li class="item has-children" style="color:#4D4D4D;">Printing

		</li>
		<li class="item has-children"><a href="Graphic Design.html">Graphic Design</a>

		</li>
		<li class="item has-children">Chinese Calendars
			<ul class="submenu">
				<li><a href="Calendars/Cane Wallscroll Calendars.html">Cane Wallscroll Calendars</a></li>
				<li><a href="Calendars/Wall Calendars.html">Wall Calendars</a></li>
				<li><a href="Calendars/Mini Calendars.html">Mini Calendars</a></li>
				<li><a href="Calendars/Desk Calendars.html">Desk Calendars</a></li>
				<li><a href="Calendars/Special Desk Calendars.html">Special Desk Calendars</a></li>
				<li><a href="Calendars/Red Packet.html">Red Packet</a></li>
				<li><a href="Calendars/More.html">More Calendars</a></li>
			</ul>
		</li>
		<li class="item"><a href="FAQS.html">FAQS</a></li>
		<li class="item"><a href="Contact Us.html">Contact Us</a></li>
	</ul>
</nav>

需要一些如何从导航中拆分徽标并将其浮动或定位到左侧

标签： htmlcss

Answer 1

您似乎希望将 home 链接与您的 navigation 分开ul。然后将<nav>元素（我已为其分配了 class .nav-wrapper）设置为 flex 父级，并将justify-content属性设置为space-between. 这会将两个元素（your<a>和 your <ul>）分别推到其父元素的左侧和右侧。

然后你可以弯曲它<ul>自己，让它的孩子（<li>'s）把自己排列成整齐的水平行。

见下文。您需要根据自己的喜好设置样式，但希望这会让您走上正确的道路。

* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: black;
  display: block;
}

.nav-wrapper {
  width: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav {
  margin-left: auto;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 0px;
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.item {
  color: black;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 15px;
  margin-left: 30px;
  margin-right: 30px;
}

<nav class="nav-wrapper">
  <a href="index.html">
    <img src="http://placehold.it/64x64" alt="Home" align="left" />
  </a>
  <ul class="nav">

    <li class="item has-children" style="color:#4D4D4D;">Printing

    </li>
    <li class="item has-children"><a href="Graphic Design.html">Graphic Design</a>

    </li>
    <li class="item has-children">Chinese Calendars
      <ul class="submenu">
        <li><a href="Calendars/Cane Wallscroll Calendars.html">Cane Wallscroll Calendars</a></li>
        <li><a href="Calendars/Wall Calendars.html">Wall Calendars</a></li>
        <li><a href="Calendars/Mini Calendars.html">Mini Calendars</a></li>
        <li><a href="Calendars/Desk Calendars.html">Desk Calendars</a></li>
        <li><a href="Calendars/Special Desk Calendars.html">Special Desk Calendars</a></li>
        <li><a href="Calendars/Red Packet.html">Red Packet</a></li>
        <li><a href="Calendars/More.html">More Calendars</a></li>
      </ul>
    </li>
    <li class="item"><a href="FAQS.html">FAQS</a></li>
    <li class="item"><a href="Contact Us.html">Contact Us</a></li>
  </ul>
</nav>