Question

基本上，我想要＆＃34;姓名＆＃34;在导航栏左侧，同时＆＃34;关于＆＃34; ＆＃34;联系＆＃34;和＆＃34;帐户＆＃34;保留在导航栏的右侧。

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

li class =＆＃34; name＆＃34; ，在 ul 中，在 div id 中，在< b> nav class 。

我不知道要改变哪种父母或子女风格。（我想改变＆＃34; Name＆＃34;的颜色也变为绿色，但它也没有工作。）

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将简单地对齐任何内联内容（例如文本，跨度等）并将其与当前列表项中的左侧对齐 - 它不会将列表项与导航中的左侧对齐。 / p>

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

导航栏：对齐内嵌文本，左右

1 个答案: