html - 导航栏 : align inline text, 左右

Question

基本上，我希望“姓名”位于导航栏的左侧，而“关于”、“联系方式”和“帐户”保留在导航栏的右侧。

https://jsfiddle.net/etw2q6sL/1/

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

我在ul、div id、nav class<中使用了li class="name"/b>。

我不知道要更改哪些父样式或子样式。 (我也想将“名称”的颜色更改为绿色，但它也不起作用)。

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。这些 float 将两个列表拉到导航的左侧和右侧。本文可能会帮助您了解如何将 float 与导航栏一起使用，就像您正在制作的那样:http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/