大家好，我想在我的页面左侧添加一个菜单栏
我的问题是它把下面的所有 html 都推到了不对的地方。菜单栏显示但无法点击。
请问我该如何解决这个问题..
提前致谢
这是我添加到 HTML 和样式表中的一些代码。
HTML
<!DOCTYPE html>
<html>
<head>
<meta https-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Site tile </title>
<div id="wrapper">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
<a class="active" href="https://Sitehere.com"><i class="fa fa-home"></i></a>
<a href="https://Sitehere.com "><i class="fa fa-search"></i></a>
<a href=mailto:email@here.com><i class="fa fa-envelope"></i></a>
<a href="https://sitehere.com/signup"><i class="fa fa-globe"></i></a>
</div>
<!--CSS-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-light.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--/CSS-->
<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.plugin.js"></script>
<script src="js/jquery.countdown.js"></script>
<script>
这是我添加到样式表中的内容..
}
.icon-bar {
width: 90px; /* Set a specific width */
background-color: #555; /* Dark-grey background */
}
.icon-bar a {
display: block; /* Make the links appear below each other instead of side-by-side */
text-align: center; /* Center-align text */
padding: 16px; /* Add some padding */
transition: all 0.3s ease; /* Add transition for hover effects */
color: white; /* White text color */
font-size: 36px; /* Increased font-size */
}
.icon-bar a:hover {
background-color: #000; /* Add a hover color */
}
.active {
background-color: #4CAF50; /* Add an active/current color */
}
如何停止将页面下方的所有 HTML 文本推送到页面下方？是否有任何原因可以看到该栏但无法与之交互？
非常感谢!
完整的 HTML
<!DOCTYPE html>
<html>
<head>
<meta https-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Coming Soon </title>
<div id="wrapper">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
<a class="active" href="https://EXAMPLE.COM"><i class="fa fa-home"></i></a>
<a href="https://EXAMPLE.COM/support "><i class="fa fa-search"></i></a>
<a href=mailto:admin@SITE.COM><i class="fa fa-envelope"></i></a>
<a href="https://EXAMPLE.COM/signup"><i class="fa fa-globe"></i></a>
</div>
<!--CSS-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-light.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<!--/CSS-->
<!--JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.plugin.js"></script>
<script src="js/jquery.countdown.js"></script>
<script>
$(function () {
$('#defaultCountdown').countdown({until: new Date(2017, 8-1, 25)});
//Replace above date with your own, to find out more visit https://keith-wood.name/countdown.html
});
</script>
<!--/JS-->
</head>
<script type="text/javascript"> //<![CDATA[
var tlJsHost = ((window.location.protocol == "httpss:") ? "httpss://secure.comodo.com/" : "https://www.trustlogo.com/");
document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E"));
//]]>
</script>
<body>
<!--DARK OVERLAY-->
<div class="overlay"></div>
<!--/DARK OVERLAY-->
<!--WRAP-->
<div id="wrap">
<!--CONTAINER-->
<div class="container">
<img src="images/LOGO.png" alt="LOGO" class="image-align" />
<h1>
<span>We are</span><br/>
Reaching For <span class="yellow">The Moon.</span>
</h1>
<p>SITE TEXT HERE.</p>
<div id="defaultCountdown"></div>
<form action="#">
<input type="text" name="email" id="email" value="Subscribe to find out when we are done">
<input type="submit" value="GO!">
</div>
</form>
<p class="copyright">Designed by <a href="https://EXAMPLE.COM" target="_blank">Investex.pro</a></p>
<img src="images/comodo_secure_seal_76x26_transp.png" alt="Comodo" class="image-align" />
</div>
<!--/CONTAINER-->
<!--/WRAP-->
<script language="JavaScript" type="text/javascript">
TrustLogo("https://EXAMPLE.COM/images/comodo_secure_seal_76x26_transp.png", "CL1", "none");
</script>
<a href="httpss://ssl.comodo.com" id="comodoTL">Comodo SSL</a>
</body>
</html>
最佳答案
要停止向下推送以下内容，您可以将其设置为 float: left; 。将其从正常文本流中取出并放在左侧。现在文本将出现在栏的旁边。
此外，如果您无法点击该栏，则可能存在具有更高 z-index 的隐藏 div。我建议您检查您的网络检查器以找出为什么您无法点击该栏。
此外:确保您的标记有效!你的头部分有点乱。 <div>元素，例如不属于这里。
.icon-bar {
width: 90px;
background-color: #555;
float: left;
margin-right: 1em;
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50;
}<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="wrapper">
<div class="icon-bar">
<a class="active" href="https://Sitehere.com"><i class="fa fa-home"></i></a>
<a href="https://Sitehere.com "><i class="fa fa-search"></i></a>
<a href=mailto:email@here.com><i class="fa fa-envelope"></i></a>
<a href="https://sitehere.com/signup"><i class="fa fa-globe"></i></a>
</div>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>关于html - CSS 和 HTML 间距问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44273143/