Question

我是编码的新手，我正在为父亲创建一个网站，以帮助建立经验和投资组合。

我使用的是非语义化和规范化。

我遇到的问题如下；

1）我似乎无法将“ Michael Gilsenan”一词的底部与我的导航栏中的文本对齐。我尝试使用line-height属性，但是它的行为不一致，并且以各种奇怪的方式移动。

2）我试图通过使用<hr>标签或使用border-bottom属性在标题下创建一行。两者最终都会在容纳我的<div>元素的<nav>上创建一个滚动条。

4个小时以来，我一直在努力寻找解决方案，并做了很多阅读。如果我缺少明显的东西，我深表歉意，我现在很累！

非常感谢。

<!DOCTYPE html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>      
    <link rel="stylesheet" type="text/css" href="../external/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="../external/css/unsemantic-grid-responsive-tablet.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:400,600" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body class="grid-container">

        <header class="grid-parent">

            <div class="grid-50">
                <a href="" class="headertext">Michael Gilsenan</a>
            </div>

            <div class="grid-50">
                <ul>
                    <li><a href="">About</a></li>
                    <li><a href="">Bio</a></li>
                    <li><a href="">Portfolio</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>

        </header> <!-- end of header-->

</body>

* {
    margin: 0;
    text-decoration: none;
}

hr {
    border-style: solid;
    border-color: #cacaca;
    position: relative;
    top: -40px;
}

/* header styles */

header {
    font-family: 'Open Sans', sans-serif;
    margin-top: 80px;
    overflow: auto;
    border-bottom: solid #cacaca 1px;
}


header a {
    color: #332e2d;
}


.headertext {
    font-family: 'Montserrat', sans-serif;
    font-size: 300%;
    letter-spacing: -0.01em;
    line-height:
}

ul li {
    display: inline; 
}

ul {
    word-spacing: 0.5em;
    text-align: right;
}

Answer 1

在ul

line-height: 55px; /* match the height of the headertext. */

在header

overflow-y: hidden;

https://jsfiddle.net/wazz/ad6g2woq/63/

诀窍是找出导致滚动条的原因。我选择了ul并浏览了各个选项，并为scroll添加了第二个滚动条，所以我说不是那样。最终，我发现滚动条已添加到标题上。

P.S。您应该为<h1>使用标头标签headertext，而不是使文本变大（300％）。搜索引擎寻找标题标签以了解页面（SEO）。如果CSS太大或太小，您可以调整标题标签的大小，并仍然使用该标签。

Answer 2

出现滚动条是因为您在 header 元素的样式声明中将 overflow 属性设置为 auto ：

header {
  font-family: 'Open Sans', sans-serif;
  margin-top: 80px;
  overflow: auto;                        <-- change or remove this
  border-bottom: solid #cacaca 1px;
}

自动使浏览器可以控制当容器中的内容不适合容器的尺寸时该怎么做，并且经常会在不需要的地方添加滚动条。删除overflow属性或将其设置为none将消除滚动条。

我对您所使用的非语义样式表不熟悉，但似乎应用了基于浮动的布局。这使得容器内的物品对准非常困难。或者，我建议您研究flexbox。有一些很好的教程。我使用了所有这些，可以保证它们的质量：

Wes Bos的Flexbox是什么-https://flexbox.io/
Flexbox完整指南-https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexbox Froggy-https://flexboxfroggy.com/

要想实现Flexbox的布局，需要以下条件：

从HTML中删除非语义网格类用以下内容替换CSS

* {
margin: 0;
text-decoration: none;
}

/* hr {
    border-style: solid;
    border-color: #cacaca;
    position: relative;
    top: -40px;
} */

/* header styles */

header {
    display: flex;
    align-items: flex-end;
    height: 80px;
    font-family: 'Open Sans', sans-serif;
    /* overflow: auto; */
    /* the overflow property is setting your scrollbar. If you don't want the scrollbar, set to none : */
    /* border-bottom: solid #cacaca 1px; */
    /* Here, your properties are in the wrong order.
       it should be:
       1. border size
       2. border type/style
       3. border color. 
       Like this: */
  border-bottom: 1px solid #cacaca;
}


header a {
    color: #332e2d;
}


.header-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    letter-spacing: -0.01em;
    /* line-height: */
    /* When you leave in style properties with no value, this will often break your stylesheet. I've commented this out. */
}

header nav {
  padding: 10px;
  display: flex;
}

header nav ul li {
  display: inline;
  align-items: flex-end;
  margin: 0 20px;
}

我在CSS中添加了一些其他注意事项。要查看有效的示例，您可以签出这支笔：

https://codepen.io/danyadsmith/pen/mKjyKQ

通常，我会尝试通过告诉您可以使用正在使用的技术来实现所需结果的方法来回答该问题，但是在这种情况下，我认为您选择的网格系统使您感到沮丧。 Flexbox正在现代浏览器中得到采用，并且可以安全地用于不需要支持旧版浏览器的项目中。有关更多信息，请查看“我可以使用”的弹性框部分：

https://caniuse.com/#feat=flexbox

希望这会有所帮助。祝你好运！

HTML / CSS-对齐文本，显示滚动条

2 个答案: