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 - 不要用网格和纵横比溢出容器

php - 检查我的网站时,源代码中缺少 wp-content 文件

CSS 评级栏位于同一行

css - 使用以内容为中心的 Bootstrap 创建网页

html - <svg> 大于 <use>

javascript - 将符号附加到每一行

html - IE7 div 位置固定

css - 为什么我的部分页面没有以浏览器大小居中?

css - JQuery 中的 setInterval() 函数调用中的背景图像 css animate()

php - htaccess - 将 .shtml 和 .html 重写为 . PHP