Question

为什么我div中的第一个元素缩进而后面的元素不是？它甚至不会上下移动。这让我发疯了......

它对顶部和底部的边距没有反应。只有向左和向右，但默认情况下它有点居中，即使我没有将它设置为那里。

HTML

{
"$schema": "http://schema.management.azure.com/schemas/2014-04-01-preview/deploymentParameters.json#",
"contentVersion": "1.0.0.0",
"parameters": {
    "databaseAccountName": {
        "value": "$DocDBAccountName$"
    },
    "location": {
        "value": "$Location$"
    }   
}
}

CSS

<!DOCTYPE html>
<html>

    <head>

        <title>PrevodEngleskog</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>

    </head> 

    <body>

        <div id="strana">

            <header>

                <img id="logo" src="C:/users/Aca/Desktop/sajt/slike/eng.png">

                <nav>

                    <ul id="navbar">

                        <li><a class="nav" href="file:///C:/Users/Aca/Desktop/Sajt/prvisajt.html">Home</a></li>
                        <li><a class="nav" href="file:///C:/Users/Aca/Desktop/Sajt/prvisajt.html">About me</a></li>
                        <li><a class="nav" href="file:///C:/Users/Aca/Desktop/Sajt/prvisajt.html">Prices</a></li>
                        <li><a class="nav" href="file:///C:/Users/Aca/Desktop/Sajt/prvisajt.html">Contact</a></li>
                        <li><a class="nav" href="file:///C:/Users/Aca/Desktop/Sajt/prvisajt.html">Gallery</a></li>

                    </ul>

                </nav>

            </header>

            <div id="main">

                <div><a class="button" href="file:///C:/Users/Aca/Desktop/Sajt/prvisajt.html">Hello</a></div>
                <div><a href="file:///C:/Users/Aca/Desktop/Sajt/prvisajt.html">Hello</a></div>
                <p>Some text</p>
                <div><a href="file:///C:/Users/Aca/Desktop/Sajt/prvisajt.html">Hello</a></div>

            </div>

        </div>

    </body>

</html>

And on the site it looks like this...

谢谢！

Answer 1

#logo上的float: left导致了问题。删除它，你应该很高兴。

#logo {
display: inline-block;
width: 143px;
height: 120px;
margin-top: -17px;
padding-right: 47px;
}

请参阅此小提琴以获取示例：https://jsfiddle.net/9kaq1Lur/2/

此外，这里有关于花车的精彩读物。在你与他们合作一段时间之前，他们非常困惑：https://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/

第一个元素缩进

1 个答案: