我是 HTML/CSS 的新手，在构建和着色我的导航栏时遇到了问题。我有两个问题。
我的菜单项在 <ul> 中列表，它们以内联方式显示，但我需要它们在屏幕宽度发生变化时自动将自身组织成一个 block 。
我需要将“Adoptly”的背景颜色更改为红色。我只能为单词着色或手动设置样式，当边距发生变化时，这不起作用。
这是我的代码目前的样子:https://gist.github.com/3a5b436746b684306be2
这是页面的样子(只关注菜单/导航栏):https://s3.amazonaws.com/codecademy-content/projects/adoptly/index.html
最佳答案
在您提供的示例中， header 元素在所有屏幕分辨率下都被赋予“inline-block”显示值。但是，在较大的分辨率下，它们的宽度为“自动”。在较小的分辨率下，它们的宽度为“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 至关重要，因此我建议研究如何使用它。
关于html - 自动内联 block 到 block 菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35019603/