html - 导航栏中的用户界面

Question

我是 HTML/CSS 的初学者，所以我在尝试将用户界面集成到 Navbar 时遇到了一个问题: .我不知道如何设置样式，我应该使用哪些标签以及如何放置用户图标...

/* Add a background color to the top navigation */

.topnav {
  background-color: #e61a26;
  overflow: hidden;
  position: relative;
  top: 0;
  width: 100%;
}


/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */

.topnav a.active {
  background-color: #f1f3f2;
  color: #000;
}


/* Add a gray right border to all a items, except the last item (last-child) */

a {
  border-right: 1px solid #fff;
}

a:last-child {
  border-right: none;
}

<p>Welcome <strong>Username></strong></p>
<p><a href="logout.php" style="color: red;">logout</a></p>


<div class="topnav">
  <a class="active" href="/WWW/home.php">Home</a>
  <a href="/WWW/shortcode.php">Shortcode</a>
  <a href="/WWW/workorder.php">Work Order</a>
</div>

Answer 1

我试图用 flexbox 解决这个问题:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

还有一些特殊情况，比如最后的边框，是看不见的。为此，请使用 :last-child 选择器将其从最后一项中删除。要将链接样式设置为看起来像普通文本，请使用 text-decoration: none; 对于用户图像，您可以使用 img 标记。设置自定义 width 和 height 后，使用 border-radius: 50%; 使其自动成为一个圆。

只需研究 flexbox 指南，您就会发现它并不难。希望这会有所帮助。

body {
  margin: 0;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: red;
}

.navbar__left,
.navbar__right {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.navbar__item {
  padding: 20px;
  color: white;
  border-right: 1px solid white;
  text-decoration: none;
}

.navbar__item:last-child {
  border-right: none;
}

.navbar__item--active {
  background-color: white;
  color: black;
}

.navbar__user-image {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.navbar__user-image,
.navbar__user-logout {
  margin-right: 15px;
}

<nav class="navbar">
  <div class="navbar__left">
    <a href="#" class="navbar__item navbar__item--active">Home</a>
    <a href="#" class="navbar__item">About us</a>
    <a href="#" class="navbar__item">Contact</a>
  </div>
  <div class="navbar__right">
    <img class="navbar__user-image" src="https://www.telegraph.co.uk/content/dam/news/2016/08/23/106598324PandawaveNEWS_trans_NvBQzQNjv4Bqeo_i_u9APj8RuoebjoAHt0k9u7HhRJvuo-ZLenGRumA.jpg?imwidth=450" alt="user img">
    <span class="navbar__user-logout">user logout</span>
  </div>
</nav>