调整浏览器窗口大小时，我的垂直导航栏上有文字。我已经设置了列，所以我不确定为什么另一列中的文本与它重叠。那么有谁知道发生了什么，我试过“位置:固定”但没有运气。这是一个非常基本的站点，但我们感谢您的帮助，谢谢。
@import url('https://fonts.googleapis.com/css?family=Roboto');
.username {
font-family: Roboto;
font-size: 14pt;
vertical-align: top;
text-align: left;
padding: 10px;
}
.vertical-nav {
width: 200px;
padding-left: 10px;
position: relative;
}
.vertical-nav a {
color: inherit;
display: block;
text-decoration: none;
font-family: Roboto;
font-size: 10pt;
}
.contact-email {}
.contact-email p {
font-family: Roboto;
font-size: 10pt;
}
.about-me {}
.about-me p {
font-family: Roboto;
font-size: 10pt;
width: 300px;
}
.column {
float: left;
}
.left {
width: 10%;
}
.right {
width: 75%;
}
.row {}<!DOCTYPE html>
<html>
<head>
<title>Ren</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
</head>
<body>
<div class="row">
<div class="column left">
<header>
<h1>
<span class="username">Ren</span>
</h1>
</header>
<div class="vertical-nav">
<a href="#">Work/Concepts</a>
<a href="#">Instagram</a>
<a href="#">Soundcloud</a>
</div>
</div>
<div class="column right">
<div class="contact-email">
<p>
email: placeholderhere@gmail.com
</p>
</div>
<div class="about-me">
<p>
Creative amature from Australia. Planning on studying audio engineering soon. Currently concept clothing designer.
</p>
</div>
</div>
</div>
</body>
</html>最佳答案
您将垂直导航指定为 200 像素宽，但 .left 容器只有 10% 的宽度，因此它会泄漏。因此，您将必须决定要做什么 - 给出超过 10% 并考虑如果没有足够的空间(例如此代码段中的文本溢出省略号)或使链接内联元素带有分词符怎么办。
@import url('https://fonts.googleapis.com/css?family=Roboto');
.username {
font-family: Roboto;
font-size: 14pt;
vertical-align: top;
text-align: left;
padding: 10px;
}
.vertical-nav {
padding-left: 10px;
position: relative;
}
.vertical-nav a {
color: inherit;
display: block;
text-decoration: none;
font-family: Roboto;
font-size: 10pt;
text-overflow: ellipsis;
overflow: hidden;
}
.contact-email {}
.contact-email p {
font-family: Roboto;
font-size: 10pt;
}
.about-me {}
.about-me p {
font-family: Roboto;
font-size: 10pt;
width: 300px;
}
.column {
float: left;
}
.left {
width: 10%;
}
.right {
width: 75%;
}
.row {}<div class="row">
<div class="column left">
<header>
<h1>
<span class="username">Ren</span>
</h1>
</header>
<div class="vertical-nav">
<a href="#">Work/Concepts</a>
<a href="#">Instagram</a>
<a href="#">Soundcloud</a>
</div>
</div>
<div class="column right">
<div class="contact-email">
<p>
email: placeholderhere@gmail.com
</p>
</div>
<div class="about-me">
<p>
Creative amature from Australia. Planning on studying audio engineering soon. Currently concept clothing designer.
</p>
</div>
</div>
</div>关于html - 文字一直在导航上移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49857621/