Question

如您所见，nav元素的顶部填充有点过多。虽然链接的轮廓位于正确的位置，但这只是额外的烦人空间。这是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>'''+title+'''</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css"/>
        <link rel="icon" type="image/x-icon" href="/favicon.ico"/>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <style>
            @import url(http://fonts.googleapis.com/css?family=Merriweather:400,700);
            html, body {
            margin: 0;
            background: #333333;
            height: 100%;
            position: relative;
            font-family: "merriweather";
            overflow-y: hidden;
            }
            h1 {
            font: bold 40pt roboto, arial, sans-serif;
            margin: 0;
            background: yellow;
            padding: 30px;
            }
            nav {
            display: inline-block;
            }
            nav a {
            cursor: pointer;
            font: bold 18px roboto;
            display: inline-block;
            transition-duration: 0.2s;
            padding: 15px 30px;
            background: linear-gradient(
            #FF9900, #FF9900 50%, #333333 50%, #333333
            /*outline: none;*/
            );
            background-size: 100% 200%;
            color: black;
            }
            nav a:hover {
            background-position: 100% 100%;
            color: yellow;
            }
            nav a:focus {
            outline:none;
            }
            #content-white-bkg {
            background: white;
            padding: 30px;
            margin: 15px;
            box-sizing: border-box;
            overflow-y: scroll;
            }
            *:not(nav) > a:link {
            cursor: pointer;
            color: #FF9900;
            transition-duration: 0.35s;
            /*border-bottom: 1px solid #FF9900;*/
            }
            *:not(nav) > a:visited {
            color: #FF6600;
            cursor: pointer;
            transition-duration: 0.35s;
            }
            *:not(nav) > a:hover, *:not(nav) > a:focus {
            color: black;
            outline: none;
            }
            a {
            text-decoration: none;
            color: black;
            }
            nav > a.selected {
            background: #333333;
            color: yellow;
            text-shadow: 0 0 3px #FF9900, 0 0 5px #FF9900, 0 0 7px #FF9900, 0 0 10px #FF9900, 0 0 15px #FF9900;
            transition-duration: 0.5s;
            }
            nav > a.selected:hover {
            color: #333333;
            }
            ::selection {
            background: #FF7700;
            }
            ::-webkit-selection {
            background: #FF7700;
            }
            ::-moz-selection {
            background: #FF7700;
            }
            h3 {
            font: bold 18px nunito;
            margin-top: 0;
            }                
        </style>
    </head>
    <body>
        <h1 title='MUCAS: Multi-User Chat Application Server'>
            <span><img width="95" height="53" title="" alt="" src="https://lh3.googleusercontent.com/-JNE2j3gX9mc/Vfn58paI2oI/AAAAAAAABRI/dqt4nqR5dZ4/w426-h238/MUCAS%2Blogo.jpeg"/></span>
            <nav><a href="/" id="nav-/" tabindex="-1">Home/chat</a><a href="/login" id="nav-/login" tabindex="-1">Log in</a><a href="/sign-up" id="nav-/sign-up" tabindex="-1">Sign up</a><a href="/about" id="nav-/about" tabindex="-1">About MUCAS</a><a href="/contact" id="nav-/contact" tabindex="-1">Contact me</a></nav>
        </h1>
        <div id="content-white-bkg">
            '''+body+'''
            <script>
                var cwb = document.getElementById("content-white-bkg");
                document.getElementById("content-white-bkg").style.height = (window.innerHeight-200)+"px";
                window.onresize = function() {
                    document.getElementById("content-white-bkg").style.height = (window.innerHeight-200)+"px";
                }
                var path = window.location.pathname;
                document.getElementById("nav-"+path).className = "selected";
            </script>
        </div>
    </body>
</html>

有人可以帮我这个吗？这是布局问题还是别的什么？

Answer 1

试试这个：

nav a {
  vertical-align: top;
}

Answer 2

检查浏览器中的开发者工具。选择nav元素并查看与该元素关联的CSS面板。查看继承的样式和计算的样式。导航上的边距或填充是继承的吗？也许是它的父元素或子元素被计算为零。这可以是链接，列表，列表项或父项。如果您可以使用flexbox，我强烈推荐它用于对齐组件和布局。

Answer 3

你可以尝试

nav {
   vertical-align: super;
}

“vertical-align：super”会将您的“nav”视为上标。我尝试将它放在你的代码中，发现它有效。如果您认为它可以解决您的问题，您可以尝试。感谢。

Answer 4

这应该可以解决问题：

nav a {
    float: left;
}

我还应该将h1更改为div元素以用于语义。 h1用于例如页面标题，而不是用...包装导航栏和徽标。

Answer 5

你这里做错了几件事。您将导航项和图像放在标题元素内。您没有为要浮动的元素使用float。

改为使用它。

我做了一个jsfiddle来说明浮动，而没有纠正语义。

考虑做这样的事情：

<div class="header">
<img src="image.jpg">
<nav>...links here...</nav>
</div>

元素得到不必要的边际

5 个答案: