自动内联阻止阻止菜单栏

Question

我是HTML / CSS的新手，我在构建和着色导航栏时遇到了麻烦。我有两个问题。

我的菜单项位于<ul>列表中，并且它们以内联方式显示，但如果屏幕宽度发生变化，我需要它们自动在块中自行构建。

我需要将“Adoptly”的背景颜色更改为红色。我只能对单词进行着色或手动设置样式，这在边距发生变化时不起作用。

这是我目前的代码：https://gist.github.com/3a5b436746b684306be2

页面的外观（仅关注菜单/导航栏）：https://s3.amazonaws.com/codecademy-content/projects/adoptly/index.html

Answer 1

在您给出的示例中，标题元素在所有屏幕分辨率下都显示为“inline-block”。但是，在较大的分辨率下，它们的宽度为“auto”。在较小的分辨率下，它们的宽度为“100％”。

检查源中的这些CSS行：

/** Normal/Larger Widths **/
.header li {color: #fff; display: inline-block; font-size: 20px; text-align: center; padding: 20px 30px; margin: 0; }

/** Mobile Widths **/
@media (max-width: 500px) { ul li { width: 100%; } }

@media标签对于响应式CSS至关重要，因此我建议研究如何使用它。