CSS & HTML 间距问题

Question

大家好，我想在我的页面左侧添加一个菜单栏

我的问题是它把下面的所有 html 推到越界。显示了菜单栏，但无法点击。

请问我该如何解决这个问题..

非常感谢

这是我添加到 HTML 和样式 sheet 的一些代码。

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>

这是我添加的样式sheet..

}

.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>

Answer 1

您应该将 html 替换为 link 标签并关闭 head 标签

<!DOCTYPE html>
<html>
<head>
<meta https-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Site tile </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--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-->
</head>


<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>


<!--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>

Answer 2

要停止栏将以下内容向下推，只需将其设置为float: left;即可将其从正常文本流中取出并放在左侧。现在文本将出现在栏的旁边。

此外，如果您无法点击该栏，则可能是隐藏的 div 具有更高的 z-index。我建议检查您的网络检查器以找出为什么您不能点击该栏。

另外：确保您的标记有效！你的头部分有点乱。 <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>

Answer 3

您应该更改 a 元素的背景颜色

}

.icon-bar a {
    display: block; /* Make the links appear below each other instead of side-by-side */
    background:#555;
    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 */
}

CSS & HTML 间距问题

CSS & HTML Spacing Issue

html

css

position

edit