html - ul 到 div 有余量

标签 html css

我在div中写了一个url,为什么url在div的右边?

enter image description here

我的代码如下:

#banner {

    height:30px;
    width: 750px;
    margin: 0 auto;
    background-color: aquamarine;
}
#banner ul{

    list-style: none;
    height:30px;
}

#banner ul li {

    float: left;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" href="styles/index.css" type="text/css">
  </head>
  <body>
  <div id="banner">
    <ul >
      <li>Home</li>
      <li>link</li>
      <li>product</li>
      <li>phone</li>
      <li>cat</li>
      <li>about</li>
    </ul>
  </div>
  </body>
</html>

我有两个问题,如何解释?

最佳答案

你看到的是这样的:

enter image description here

它是盒子模型的可视化表示,Safari 会在样式检查器中向您显示。我发现 Chrome 在显示 CSS 信息时更清晰一些。

关于html - ul 到 div 有余量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43759911/

相关文章:

javascript - 使用wordpress滚动时的SVG动画

javascript - 如何让某些 anchor 标 checkout 现而其他 anchor 标签消失?

CSS 溢出 : hidden cuts shadow

javascript - 将垂直文本与上面的条对齐

jquery - 并排创建两个 div 的 Bootstrap 布局

javascript - 这个简单的 JavaScript 代码有什么问题?

html - 将两个输入文本放在同一行

javascript - jquery 从 data-href 获取数据

css - 在 Markdown (wiki) 中缩进子标题 (H1>H2>H3) block ?

html - 如何使 Flexbox Item 成为超链接?