Question

如何让这些盒子看起来像一个小盒子或方块？我设置了#header宽度和高度以及它不起作用的那些。

    <!DOCTYPE HTML>
<html lang="en"> 
    <head>
        <title>A Page</title>
        <link type="text/css" rel="stylesheet" href="css/main.css" />
        <!-- GOOGLE FONTS -->
            <link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet" />


    </head>
    <body>
        <div id="header">
            <div id="search">
                <form>
                    <div id="box" class="text">
                        <input type="text" placeholder="Search" />
                    </div>
                    <div id="box" class="small">
                        <input type="image" src="" alt="submit" />
                    </div>
                </form>
            </div>

            <div id="menu">
                <a href=""><div id="box" class="big"></div></a>
                <a><div id="box" class="small"><img></img></div></a>
                <a><div id="box" class="small"><img></img></div></a>
                <span id="notifications"></span>
            </div>
        </div>

        <br />

        <div id="box" class="big">

        </div>

CSS：

 body{
    font-family: 'Prompt', sans-serif;
    background: #707070;
}

#header{
    background: #e2ecf2;
    opacity: 0.87;
    border-radius: 30px;
    height: 60px;
    width: 1000px;
    position: fixed;
    left: 50%;
    top: 25px;
    transform: translateX(-50%);
}

#box{
    outline: 3px;
    outline-style: solid;
    outline-color: #d7d7d7;
}

#box .small{
    width: 35px;
    height: 35px;
}

#box .big{
    width: 50px;
    height: 50px;
}

#header #search{
    margin-left: 37px;
}

#header #search input{
    float: left;
    margin-left: 20px;
}

Answer 1

在CSS中指定了样式

#box .small

此样式适用于#box中具有“小”类的元素 - 例如：

<div id="box"><span class="small"></span></div>

删除它们之间的空格，它将应用于具有“小”类

的元素#box

#box.small

查看错误的好工具是浏览器中的开发人员控制台。这应该能够显示在运行时将哪些样式应用于元素。

另请注意，ID可以按照您的方式使用，但我不建议多次使用相同的ID，因为它应该是唯一的理想选择。您可以使用另一个类，并应用如下样式：

div.box.small

在CSS中使div成为正方形

1 个答案: