html - 标题无响应,导致按钮重叠
问题描述
我是 Web 开发的新手,我正在尝试找出我在标题中遇到的问题。我希望我的标题是响应式的,并且不会导致它旁边的按钮元素重叠。
我曾尝试将position
、float
和transform
元素分别并一次全部应用到标题部分,但这似乎无法解决问题,或者我只是不知道如何正确使用它们。
下面是我的 html 和 css 的示例。
HTML:
<header>
<a href="Website.html"><img id="smallLogo" src="/Users/ultimateorganism/Desktop/Brown-Dev-Proj-Vol.1/FuturUImages/smallLogo.png" alt="smallLogo"></a>
<h1 class="bizPage">FuturU</h1>
<div class="homeButtons">
<a href="Website.html" class="btn btn-outline-light" id="linkHomePage">Home</a>
<a href="Mindmovies.html" class="btn btn-outline-light" id="linkMindMovies">MindMovies</a>
<a href="mailto:pbusko5@gmail.com?subject=I am interested in an affirmation/mindmap!" class="btn btn-outline-light" id="linkContact">Contact</a>
<a href="About.html" class="btn btn-outline-light" id="linkAbout">About</a>
<a href="Testimonials.html" class="btn btn-outline-light" id="linkTestimonials">Testimonials</a>
<hr style="background-color: white; height: 3px; opacity: initial;">
</div>
<hr style="background-color: white; height: 3px; opacity: initial;">
</header>
CSS 类:
#smallLogo{
width: 110px;
height: 110px;
float: left;
}
.bizPage{
font-size: 80px;
color: white;
position: relative;
top: 30%;
left: 30%;
}
header{
background-color: black;
font-family: Courier;
justify-content: center;
}
.homeButtons{
position: absolute;
top: 32px;
right: 26px;
font-size: 8px;
}
.lineHeader, .lineFooter{
margin-left: auto;
margin-right: auto;
color: white;
height: 3px;
width: auto;
{
对此的任何解决方案将不胜感激。谢谢
解决方案
基本上,如果你想制作一个完全响应的页面/导航栏,你可能需要使用“汉堡菜单”。看起来你已经使用了 Bootstrap。你可以看到这个链接
尽管如此,我仍在努力提供一个可衡量的解决方案。根据需要检查代码和样式。我刚刚在 html 部分使用了一个 flex div。
header{
width: 100%;
}
#smallLogo{
width: 110px;
height: 110px;
/* float: left; */
}
.bizPage{
font-size: 80px;
color: white;
/* position: relative; */
top: 30%;
/* left: 30%; */
}
header{
background-color: black;
font-family: Courier;
}
.homeButtons{
/* position: absolute; */
/* top: 32px; */
/* right: 26px; */
margin-top: 1%;
font-size: 8px;
}
.lineHeader, .lineFooter{
/* margin-left: auto;
margin-right: auto; */
color: white;
height: 3px;
width: auto;
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stack Overflow</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<header>
<div class="d-flex justify-content-between">
<a href="Website.html"><img id="smallLogo" src="/Users/ultimateorganism/Desktop/Brown-Dev-Proj-Vol.1/FuturUImages/smallLogo.png" alt="smallLogo"></a>
<h1 class="bizPage">FuturU</h1>
<div class="homeButtons">
<a href="Website.html" class="btn btn-outline-light" id="linkHomePage">Home</a>
<a href="Mindmovies.html" class="btn btn-outline-light" id="linkMindMovies">MindMovies</a>
<a href="mailto:pbusko5@gmail.com?subject=I am interested in an affirmation/mindmap!" class="btn btn-outline-light" id="linkContact">Contact</a>
<a href="About.html" class="btn btn-outline-light" id="linkAbout">About</a>
<a href="Testimonials.html" class="btn btn-outline-light" id="linkTestimonials">Testimonials</a>
<hr style="background-color: white; height: 3px; opacity: initial;">
</div>
</div>
<hr style="background-color: white; height: 3px; opacity: initial;">
</header>
<!-- <script type="text/javascript" src="index.js"></script> -->
</body>
</html>
请让我知道这对你有没有用。
推荐阅读
- asp.net - 即使我设置了静态机器密钥,oauth 持有者刷新令牌在应用程序池回收时也无效
- tinymce - TinyMCE - 向编辑器添加一个简单的按钮(不是工具栏)
- haskell - 大输入的阶乘函数返回负数
- sql - 根据商店选择每个产品的最新余额(SQL)
- python - 将一种 json 格式更改为另一种
- excel - 如何从动态添加的文本框中读取文本?
- jquery - 如何使用 jquery 从 api 调用加载新图表(chartsjs)?
- c# - 使用月份名称动态绑定下拉列表
- c# - 错误:非静态字段、方法或属性需要对象引用(在 Unity 中)
- html - 改变标签的颜色通过内部 CSS