堆棧內存溢出
  簡體   English   中英

CSS和HTML間距問題

[英]CSS & HTML Spacing Issue

 原文  2017-05-30 22:54:43  1   3    html/ css/ position/ edit

問題描述

大家好，我想在頁面左側添加一個菜單欄

我的問題是將所有下面的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>

3 個解決方案

解決方案1
 0  2017-05-30 23:01:05

您應該在鏈接標簽下替換html並關閉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>

解決方案2
 0 已采納  2017-05-30 23:21:59

要停止向下推動以下內容的欄，您可以將其設置為float: left; 將其從常規文本流中刪除並放在左側。 現在，文本將顯示在欄旁邊。

另外，如果您無法單擊該欄，則可能存在一個隱藏的div，其Z索引較高。 我建議您檢查您的Web檢查器以了解為什么無法單擊該欄。

另外： 確保您的標記有效 ！ 您的頭部有些混亂。 <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>

解決方案3
 0  2017-05-30 23:22:23

您應該更改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 */
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 html/css中的間距問題 HTML和CSS中的圖像間距問題 IE中的間距混亂（html / css問題） 表格中圖像的間距問題 - HTML 和 CSS CSS的間距問題 iFrame的CSS間距問題 CSS：下拉列表的間距問題 CSS Bootstrap間距問題 向窗口小部件添加內容時出現HTML + CSS間距問題 CSS和HTML表格-間距/填充/邊框問題（不確定哪個）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM