时间戳

首页 > 解决方案 > HTML/CSS - 对齐文本，出现滚动条

html - HTML/CSS - 对齐文本，出现滚动条

问题描述

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

我正在使用非语义和规范化。

我遇到的问题如下；

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;
}

标签： htmlcss

解决方案

在ul

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

在header

overflow-y: hidden;

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

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

PS您应该使用标题标签<h1>而headertext不是使文本变大（300％）。搜索引擎寻找标题标签来理解页面 (SEO)。您可以调整 CSS 中标题标签的大小，如果它太大或太小，仍然可以使用该标签。

推荐阅读