gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 01:30:23 24 4
gpt4 key购买 nike

我是编码新手,我正在为我父亲创建一个网站,以帮助他积累经验和作品集。

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

我遇到的问题如下;

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

最佳答案

关于ul

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

关于header

overflow-y: hidden;

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

诀窍是找出导致滚动条的原因。我选择了 ul并通过选项和 scroll添加了第二个滚动条,所以我知道它不是那个。最终我发现标题上添加了滚动条。

附言您应该使用 header 标记 <h1>对于 headertext而不是使文本变大 (300%)。搜索引擎寻找标题标签来了解页面 (SEO)。如果它太大或太小,您可以在您的 css 中调整 header 标签的大小,并且仍然使用该标签。

关于HTML/CSS - 对齐文本,出现滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51014604/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com