gpt4 book ai didi

html - 如何防止我的 H1 标签移出视线(消失)?

转载 作者:行者123 更新时间:2023-11-28 15:59:18 24 4
gpt4 key购买 nike

我最近没有做太多的 html 和 css,我不明白为什么当我调整浏览器大小时我的 H1 消失在视线之外......

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript src="Jquery1_10_2.js"> </script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="LogIn_Page.css" media="screen" />
<!-- <script type="text/javascript src="LogIn_Page.js"> </script> -->

</head>
<body>
<div style="margin-top: 15px;text-align: center;" class="navbar navbar-inverse navbar-fixed-top container">

<a href="http://somesite.com/" title="Web Site"> <img src="Logo.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-right:5px"> </a>
<a href="http://www.somesite2.org/" title="Web Site"> <img src="somesite_logo.png" alt="somesite" style="width:225px; height:100px; text-align:center;margin-right:5px; margin-left:5px;"> </a>
<a href="http://somesite3.com/" title="somesite Web Site"> <img src="somesite.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-left:5px;"> </a>

</div>

<div class="container body-content" style="margin-top: 125px;">
<div class="row">
<div class="col-md-12">
<H1 style="margin-bottom: 50px;">Welcome to the Crops web application</H1>
<P>Please login:</P>

<button onclick="window.location.href=&quot;/auth&quot;" >Login link</button>

</div>
</div>



</div>



<div id="footer">

<footer>
<script>window.onload = function() {
var d = new Date();
var n = d.getFullYear();
document.getElementById("date").innerHTML = "© " + n + " My company";}</script>
<p id="date"></p>
</footer>
</div>
</body>
</html>

这三张图片像预期的那样堆叠在一起,但完全分散的只是 H1 标签。除了默认的 Bootstrap 包,我什至没有使用任何自定义 css。

有人可以指出正确的解决方案吗?

我尝试在 H1 标签内放入以下样式:position、float、height、width、min-height、min-width,但这些似乎都不适合我,当我缩小浏览器尺寸时,它就一直消失到最大。当然,当浏览器全屏时它就在那里......

最佳答案

您可以将position: relative 添加到您的navbar

.navbar.navbar-inverse {
position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div style="margin-top: 15px;text-align: center;" class="navbar navbar-inverse navbar-fixed-top container">
<a href="http://somesite.com/" title="Web Site">
<img src="Logo.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-right:5px">
</a>
<a href="http://www.somesite2.org/" title="Web Site">
<img src="somesite_logo.png" alt="somesite" style="width:225px; height:100px; text-align:center;margin-right:5px; margin-left:5px;">
</a>
<a href="http://somesite3.com/" title="somesite Web Site">
<img src="somesite.png" alt="somesite" style="width:225px; height:100px; text-align:center; margin-left:5px;">
</a>

</div>
<div class="container body-content">
<div class="row">
<div class="col-md-12">
<h1 style="margin-bottom: 50px;">Welcome to the Crops web application</h1>

<p>Please login:</p>
<button onclick="window.location.href=&quot;/auth&quot;">Login link</button>
</div>
</div>
</div>

关于html - 如何防止我的 H1 标签移出视线(消失)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32015240/

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