Question

我在div中写了一个url，但是为什么url是div的右边缘？

我的代码如下：

＆＃13;

#banner {

    height:30px;
    width: 750px;
    margin: 0 auto;
    background-color: aquamarine;
}
#banner ul{

    list-style: none;
    height:30px;
}

#banner ul li {

    float: left;
}

＆＃13;

<!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>

＆＃13;

我有两个问题，如何解释？

Answer 1

你看到的是：

它是盒子模型的直观表示，Safari将在样式检查器中向您显示。在显示CSS信息时，我发现Chrome更清晰。

Answer 2

正如Toby所提到的，橙色是浏览器显示所选元素周围有边距的地方，绿色是填充。

之所以存在，是因为浏览器为html添加了默认样式。这样考虑一下，当你添加<h1>并在浏览器中查看它时，它显示为大于<h2>并且比段落标记大 - 即使你没有＆＃39;添加了样式表。这是因为浏览器默认添加了这个。

同样的事情发生在各种各样的元素上，在这种情况下，你会看到它出现在一个无序的列表中。浏览器在<ul>的顶部和底部以及左侧的一些填充处添加了一些边距。

如果这不是您想要的，您可以在自己的样式中覆盖它，在您已经拥有该元素样式的相同位置：

#banner ul{
  list-style: none;
  height:30px;
  margin: 0; // removes the default margin
  padding: 0; // removes the default padding
}

如果您想要删除所有浏览器默认样式，因为您想要一个新的平板，您可以添加一个＆＃c; css reset＆＃39;。一个受欢迎的是Eric Meyers，https://meyerweb.com/eric/tools/css/reset/。有时这并不是必要的，因为在这种情况下，如果您只是想要一个常规的有序列表，则必须重新添加list-styles。

Answer 3

绿色是默认填充。如果您要删除该绿色，请将padding:0;添加到#banner ul

您的代码可能如下：

#banner ul{
    padding: 0;
    list-style: none;
    height:30px;
}

Answer 4

橙色：您在#banner ul

中配置的30px

保证金：这是标准的ul-padding。如果要删除它，请编辑为：

#include <stdio.h>
#include <stdlib.h>

#include "bintree.h"

void paste_node(Tree ** tr, int x)
{
    Tree *tree_bin;
    if ((*tr) == NULL) {
        tree_bin = (Tree *) malloc(sizeof(Tree));
        tree_bin->item = x;
        tree_bin->lchild = tree_bin->rchild = NULL;
        *tr = tree_bin;
        return;
    }

    if (x < (*tr)->item) {
        paste_node(&((*tr)->lchild), x);
    } else {
        paste_node(&((*tr)->rchild), x);
    }
}

Tree * minimum(Tree *tr)
{
    if (tr->lchild == NULL) return tr;
    return minimum(tr->lchild);
}

void delete_node(Tree ** tr, int num)
{ 
    if (tr == NULL) return;

    if (num < tr->item)
        tr->lchild = delete_node(tr->lchild, num);
    else if (num > tr->item)
        tr->rchild = delete_node(tr->rchild, num);
    else {
        if (tr->lchild == NULL) {
            Tree *tree_bin = tr->rchild;
            free(tr);
            return;
        }
        else if (tr->rchild == NULL) {
            Tree *tree_bin = tr->lchild;
            free(tr);
            return;
        }

        Tree *tree_bin = minimum(tr->rchild);
        tr->item = tree_bin->item;
        tr->rchild = delete_node(tr->rchild, tree_bin->item);
    }

    return;
}

void print_tree(Tree *tr, int depth)
{
    if (tr != NULL) {
        print_tree(tr->lchild, depth + 1);
        for(int i = 0; i < depth; ++i) printf("   ");
        printf("%d<\n", tr->item);
        print_tree(tr->rchild, depth + 1);
    }
}

int check_node(Tree **tr, int x) {
    if ((*tr) == NULL) {
        return 1;
    }

    if (x < (*tr)->item) {
        check_node(&((*tr)->lchild), x);
    } else if (x == (*tr)->item) {
        return -1;
    } else {
        check_node(&((*tr)->rchild), x);
    }
}

div有ul的余量

4 个答案: