html - 经过多次尝试后试图使导航栏响应

Question

我是 CSS 和 html 的初学者和新手，我一直在努力做到这一点，以便我的导航栏可以随屏幕缩放。我试过看教程，但我似乎无法让它工作。这是代码，

enter code here

https://jsfiddle.net/Tello00/qaxwvk3f/1/

标签： htmlcss

Answer 1

如果您知道导航栏中有 5 个项目，则可以将它们的样式设置为每个 20% 的宽度。对您的 css 进行的此编辑对您有用吗？

body {
  font-family: monospace;
}
a {
  text-decoration: none;
  color: black;

}
#title-navigation {
  list-style: none;
  padding: 0px;
  margin: 0px;
  width: 100%;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    float : left;
    width : 20%;
}