导航栏：左右对齐内联文本

Question

基本上，我希望 "Name" 转到导航栏的左侧，而 "About" "Contact" 和 "Account" 留在导航栏的右侧酒吧.

.name {
  font-family: "ChunkFive"; /* works */
  font-size: 22px;          /* works */
  color: #32B432;           /* doesn't */
  text-align: left;         /* doesn't */
}

我用了 li class="name", ul, ]div id，在 nav class 内。

我不知道要更改哪些父级或子级样式。（我也想将 "Name" 的颜色更改为绿色，但它也不起作用）。

Answer 1

这是对您的 Fiddle 的更新，应该可以满足您的要求：https://jsfiddle.net/etw2q6sL/4/

颜色规则不起作用是因为您的其他规则 #mainNav a 为导航中的所有链接指定了一种颜色，这比您的 .name 规则更具体，因此浏览器选择从前的颜色。为了使这项工作如您所愿，我会通过向其选择器添加额外条件来使 .name 规则更加具体 - 例如将其更改为 #mainNav .name a。要了解有关 CSS 特异性（应用规则的顺序）的更多信息，请查看：https://css-tricks.com/specifics-on-css-specificity/

关于对齐问题，您混淆了文本对齐与列表项的放置。 text-align: left 将简单地对齐任何内联内容（例如文本、跨度等）并将其与当前列表项中的左侧对齐 - 它不会将列表项与导航中的左侧对齐。

相反，您想要的是 float。我所做的是将您的列表分成两个单独的 ul，一个应用了 float: left，另一个应用了 float: right。这些浮动将两个列表拉到导航的左侧和右侧。本文可能会帮助您了解如何将浮动与导航栏一起使用，就像您正在制作的那样：http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/

导航栏：左右对齐内联文本

nav-bar: align inline text, left and right

html

css

alignment

navbar