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/

相关文章:

html - 如何将 container-fluid 内的内容与 bootstrap 4 上的容器对齐?

JQuery 动态添加的 DOM 丢失(不)CSS 样式

html - 如何始终在浏览器中显示垂直滚动条?

javascript - jquery - 旋转一次

html - Bootstrap 中的响应式可滚动框架

javascript - 单击按钮更改日期

javascript - JavaScript 函数没有输出

html - 放大的 SVG 图像/形状在过渡时模糊

html - Helvetica 字体以斜体显示

jquery - 将元素放置在幻灯片上方