时间戳

首页 > 解决方案 > 我的标题文本不会与窗口大小相关联

html - 我的标题文本不会与窗口大小相关联

问题描述

在我的投资组合中，我想创建一个与每个屏幕尺寸兼容的标题，这意味着无论文本大小如何，文本都适合屏幕，我可以测试的一种方法是在检查元素。我遇到的问题是，每当我调整标题时，标题中的文本都是静态的，这意味着当我缩短它时它会隐藏在屏幕之外

在此处输入图像描述

我试图通过添加position: absolute; 到我的标题 css 并最终添加每个链接来修复它，但这没有用。我试过position: fixed;了，display: flex但效果不佳，所以我不知道该怎么办。

li a {
  color: black;
  text-decoration: none;
}

.about {
  position: absolute;
  padding-left: 10vh;
  font-size: 30px;
  padding-right: auto;
}
.skills {
  position: absolute;
  padding-left: 60vh;
  font-size: 30px;
  padding-right: auto;
}
.projects {
  position: absolute;
  padding-left: 100vh;
  font-size: 30px;
  padding-right: auto;
}
.contacts {
  position: absolute;
  padding-left: 150vh;
  font-size: 30px;
  padding-right: auto;
}
.title {
  margin-bottom: 6vh;
  margin-top: 0px;
}

header {
  padding-bottom: 8px;
  padding-top: 9px;
}
<header>  
        <ul className="title">
           <li className="about"><a href="#">ABOUT ME</a></li>
           <li className="skills"><a href="#">SKILLS</a></li>
           <li className="projects"><a href="#">PROJECTS</a></li>
           <li className="contacts"><a href="#">CONTACTS</a></li>
        </ul>
</header>

奖金问题：

我也很难删除“关于我”链接旁边的那个要点，所以任何关于如何修复它的建议也会感谢我

标签： htmlcss

解决方案

永远不要使用绝对定位来定位所有元素，尤其是当它是正常布局时，例如彼此重叠或彼此相邻，例如您的。

可以很容易地实现更好的布局。

.header{
    padding: 1rem 0;
}

ul{
    list-style:none;
}

li a {
    color: black;
    text-decoration: none;
}

.title{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
<header>  
    <ul class="title">
       <li><a href="#">ABOUT ME</a></li>
       <li><a href="#">SKILLS</a></li>
       <li><a href="#">PROJECTS</a></li>
       <li><a href="#">CONTACTS</a></li>
    </ul>
</header>

您应该尝试找到组并将它们一起设置样式，而不是单独设置所有元素的样式。因此，例如li，您应该设置整体的样式，而不是设置每个 的样式。ul

推荐阅读