1. 首页
  2. 问答
  3. 如何摆脱按钮和内容/段落之间的空间？ （CSS）

如何摆脱按钮和内容/段落之间的空间？ （CSS）

2016-11-27 73 views
-2

我正在制作一份html/css/js手册，并通过我制作两个按钮的手册。如何摆脱按钮和内容/段落之间的空间？ （CSS）

这是什么样子： enter image description here

奇怪，这是，第一个预览的菜单项“introductie”具有相同的CSS代码作为第四预览的菜单项“哈特美联”。但为什么段落和预览的“介绍”中的按钮之间存在差距？

我的代码：

HTML

<!DOCTYPE html> 
<html lang="nl"> 

<head> 
    <meta charset="utf-8"/> 
    <title>Hartmeting</title> 

    <link rel="stylesheet" href="css/stylesheet.css" type="text/css"> 

</head> 

<body> 

    <div id="wrapper"> 
     <header> 

      <div id="logo" onclick="window.location.href='http://localhost/Zorg_Heartbeat%20Manual/'"> 
       <img src="img/logo.png" alt="logo" /> 
       <h1 >Hartmeting voor fitte mensen</h1> 
      </div> 

     </header> 

     <!-- Stappenplan Menu --> 
     <nav id="menu"> 
      <ul> 

       <li><a href="#menu_a"> Introductie </a></li> 
       <li><a href="#menu_b"> Het Probleem </a></li> 
       <li><a href="#menu_c"> Stappenplan </a></li> 
       <li><a href="#menu_d"> Hartmeting </a></li> 
      </ul> 

     </nav> 

     <!-- HET STAPPENPLAN --> 
     <div id="content"> 

      <!-- Intro Slide --> 
      <article id="menu_a"> 
       <h2>Introductie</h2><br> 
       <figure> 
        <img src="img/intro1.jpeg" alt="Intro Afbeelding"/> 
       </figure> 
       <p>Joggers zijn actieve mensen die graag tussen werk en/of studie nog even de kilometers willen pakken. Hierin houden ze graag bij of ze fitter worden of niet, zo zul je vaak zien dat joggers hun rusthartslag meten om een indicatie van positieve 'progress' te kunnen inzien. Het bijhouden van de gezondheid hoort eigenlijk niet alleen bij joggers, maar bij elk fit persoon die graag de resultaten wilt vastpakken. Zonder dat je een smartwatch nodig hebt, kun je met elk apparaat die beschikking heeft tot het internet, je hartslag meten!</p> 
      </article> 

      <!-- Slide 1 --> 

      <article id="menu_b"> 
       <h2>Het Probleem</h2><br> 
       <figure> 
        <img src="img/hetprobleem1.jpg" alt="Eerste Afbeelding"/> 
       </figure> 
       <p>Maar waarom een WebApp die je hartslag meet? Simpel, smartwatches zijn nou eenmaal veels te duur, je gebruikt ze niet altijd en daarnaast zijn ze de meeste ook nog eens privacy gevoelig.</p> 
      </article> 

      <!-- Slide 2 --> 

      <article id="menu_c"> 
       <h2>Hoe kan mijn hartslag meten?</h2><br> 
       <figure> 
        <img src="img/polsmeten.png" alt="Tweede Afbeelding"/> 
       </figure> 

       <ol id="stappen"> 
        <li>Ga gerust zitten.</li> 
        <li>Houd je wijsvinger en middelvinger tegen elkaar.</li> 
        <li>Leg beide vingers links of rechts van de adamsappel (zoek naar een kloppende beweging).</li> 
        <li>Klik met je linker muisknop op de box elke keer dat je een klopping voelt.</li> 
        <li>Doe dit achtereenvolgend tot dat je 10 keer hebt geklikt (dus 10 kloppingen).</li> 
        <li>De pop-up laat je gemiddelde hartslag per minuut zien.</li> 
       </ol> 


      </article> 

      <!-- Slide 3 -->  

      <article id="menu_d"> 

       <h2>Hart Meten</h2><br> 
       <figure> 
        <!-- Hartmeet tool --> 
         <div id="klik_Hart" class="heart"> 
         </div> 
         <br> 
         <br> 
         <br> 

         <!-- Einde hartmeet tool--> 
        </figure> 

        <ol id="stappen"> 
         <li>Een normaal rustend hart van een volwassenen meet tussen de 60 - 100 hartslagen per minuut.</li> 
         <li>Boven de 100 is slecht.</li> 
         <li>Richting de 40 is goed.</li> 
        </ol> 

       </article> 

       <!-- ABOUT --> 
            <!-- <div id="about"> 

             <p>TEST TEST TEST TEST TEST TEST TEST TEST TEST </p> 

            </div> --> 


            <!-- vorige/volgende buttons --> 
            <table id="volgorde"> 
             <th><button class="button" id="previous">Previous</button></th> 
             <th><button class="button" id="next">Next</button></th> 
             <th> 
              <!-- Checkbox Auto Slider --> 
              <div class="auto_menu"> 
               <input type="checkbox" id="checkbox"> 
               <label for="checkbox">Auto Handleiding</label> 
              </div> 
              <!-- --> 
             </th> 
            </table> 

           <div id="myNav" class="overlay"> 
           <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
           <div class="overlay-content"> 
           <p> Wij zijn ....</p> 
           </div> 
           </div> 


           </div> 
           <div id="buffer"></div> 
           <footer> 
           <a id="footer_" href="#" onclick="openNav()">&#9776; Over ons </a> 
           </footer> 

          </div> 

          <script src="js/jquery-3.1.1.js" type='text/javascript'></script> 
          <script src="js/scripts1.js" type='text/javascript'></script> 


         </body> 

         </html>

CSS

#titel{ color: #B0C4DE; text-align: center;} 

/*Verstop alle artikelen binnen content*/ 
article { 
    display:none; 
} 

body{ 

    background-color: #333333; 
    color: grey; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300; 
    font-size: 12pt; 
    width: 100%% 
} 

#wrapper{ 

    background-color: #ADD8E6; 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
    /*background-image: url("../img/bg.jpg");*/ 
    background-size: cover; 
    background-position: left top; 
    border: 2px groove #001f3f; 
    overflow: auto; 

} 

#content{ 
    margin-left: auto; 
    margin-right: auto; 
    float: left; 
    width: 70%; 
} 

#content img{ 

    height: 250px; 
    width: 450px; 
} 

#menu{ 

    font-weight: thin; 
    color: #424242; 
    float: left; 
    width: 15%; 
    text-align: center; 
    margin-left: 5%; 
    margin-top: 6.7%; 
    font-size: 10pt; 
} 

    ul{list-style-type: none;} 

    h1{ text-shadow: 1px 1px 3px #00008B;} 

    a{ 
     display: block; 
     text-decoration: none; 
     color: #0074D9; 
     background-color: #001f3f; 
     border: 1px solid #B0C4DE; 
     padding: 5px; 

    } 

    a:hover{ 
     background-color: #FFD900; 
     color: #001f3f; 
    } 

    footer{ 
     overflow: hidden; 
     clear: both; 
    } 

    #volgorde{ 
     font-weight: thin; 
     color: grey; 
     width: 10%; 
     text-align: center; 
     clear: both; 
     margin-left: 3%; 
     margin-bottom: 2%; 
    } 

    .button { 
     background-color: #001f3f; 
     color: #FFDC00; 
     border: none; 
     color: white; 
     padding: 5px 30px; 
     text-align: center; 
     text-decoration: none; 
     display: inline-block; 
     font-size: 14px; 
     display: block; 
    } 

    .button:hover{ 
     background-color: #FFD900; 
     color: #001f3f; 
    } 

    .heart{ 
     color:#FBF9FF; 
     background-image: url("../img/hart4.png"); 
     background-size: 150px 150px; 
     height: 150px; 
     width: 150px; 
    } 

    .heart:hoover{ 
     color: #FFA07A; 
     background-color: grey; 
    } 

    #uitleg p { 
     color: #FA8072; 
    } 

    #logo img { 
     float: left; 
     width: 60px; 
     height: 60px; 
     margin-left: 2%; 

    } 

    #logo h1 { 
     position: relative; 
     top: 15px; 
     left: 10px; 
    } 

    #klik_ { 
     text-align: center; 
    } 

    article p { 

     height: 200px; 
     width: 450px; 
     font-size: 10pt; 
     color: grey; 
     font-weight: bold; 
     overflow: scroll; 
     margin-left: 4%; 
     margin-bottom: 5%; 
     text-align: justify; 
     text-justify: inter-word; 
    } 

    #buffer{ 
     clear: both; 
     height: 10%; 
    } 

    #stappen{ 
     font-weight: bold; 
     font-size: 10pt; 
    } 

    .auto_menu { 
     position: relative; 
     margin: 5px auto; 
     width: 160px; 
     font-size: 14px; 
    } 


    /*OVER ONS OVERLAY*/ 

    .overlay { 
    height: 0%; 
    width: 100%; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0, 0.9); 
    overflow-y: hidden; 
    transition: 0.5s; 
} 

.overlay-content { 
    position: relative; 
    top: 25%; 
    width: 100%; 
    text-align: center; 
    margin-top: 30px; 
} 

.overlay a { 
    padding: 8px; 
    text-decoration: none; 
    font-size: 36px; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 
} 

.overlay a:hover, .overlay a:focus { 
    color: #f1f1f1; 
} 

.overlay .closebtn { 
    position: absolute; 
    top: 20px; 
    right: 45px; 
    font-size: 60px; 
} 

@media screen and (max-height: 450px) { 
    .overlay {overflow-y: auto;} 
    .overlay a {font-size: 20px} 
    .overlay .closebtn { 
    font-size: 40px; 
    top: 15px; 
    right: 35px; 
    } 
}

编辑：Web检查显示：

Screenshot showing findings

所以我想可能是：

margin-bottom: 5%;

当我删除了这一点，什么都没有发生..

来源

2016-11-27 user7186746

+0

检查浏览器的“检查元素”功能中的有问题的元素，你会看到是什么导致了间隙 - 填充，余量等等。 – junkfoodjunkie

+0

通过检查这里来修复你的13个html错误。粘贴你的代码https://validator.w3.org/nu/#textarea然后一旦你编辑你的html再试一次 – mlegg

+0

@mlegg谢谢我不知道这一点，我会修复这13个错误并回来。 – user7186746

回答

0

您已定义p的height。这意味着无论element中的内容如何，​​您的element将始终停留在height的200px。

为了改变这种状况给它的dynamicheight变化：

display: inline-block; 
height: auto;

的代码是相当直接的，你显示什么是块内。高度根据block的inline自动调整。

来源

2016-11-27 02:54:24 Nytrix

相关问题

 相关问题