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

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” 。

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

Answer 1

这是您的小提琴的更新，可以执行您想要的操作： 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-horizo​​ntal-navigation-bar/