基本上,我希望“姓名”位于导航栏的左侧,而“关于”、“联系方式”和“帐户”保留在导航栏的右侧。
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>。
我不知道要更改哪些父样式或子样式。 (我也想将“名称”的颜色更改为绿色,但它也不起作用)。
最佳答案
这是对您的 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/
关于html - 导航栏 : align inline text, 左右,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29724591/