1. 首頁
  2. 問答
  3. 一些孩子的元素不影響父母的身高

一些孩子的元素不影響父母的身高

2012-12-14 196 views
2

我正在爲我的大學建設，但遇到了這個奇怪的問題：<div>元素的高度不受其內部的影響。一些孩子的元素不影響父母的身高

只要看看這些截圖：

the outer <code><div></code>

the inner <code><label></code>

the inner <code><textarea></code>

demo

只是爲了讓一些感覺：我試圖建立小號沒有使用表格（對我來說）複雜（只有CSS - 我們生活在一個現代的Web時代，儘管=））。這是我的目標：

what i am trying to implement

我有一些長而凌亂的HTML和CSS代碼 - 我真的不是一個設計師呢。那就是：

HTML：

<html> 
    <head> 
     <title>verstka</title> 

     <link rel="stylesheet" type="text/css" href="verstka.css" media="all" /> 
    </head> 

    <body> 
     <div class="top"> 
      <div class="header angled-stripes"> 
       <div class="logo"></div> 

       <div class="right-menu"> 
        <div class="quick-links links"> 
         <div class="item"> 
          <a href="/">Home</a> 
         </div> 

         <div class="item"> 
          <a href="/">Login</a> 
         </div> 

         <div class="item"> 
          <span>Sitemap</span> 
         </div> 
        </div> 

        <div class="quick-search"> 
         <form action="" method="get" onsubmit="javascript:void(0);"> 
          <input type="text" name="q" size="20" /> 
          <a href="/" onclick="return false;" class="button">search</a> 
         </form> 
        </div> 
       </div> 
      </div> 

      <div class="top-menu"> 
       <div class="item"> 
        <a href="/" class="products">Products</a> 
       </div> 

       <div class="item"> 
        <a href="/" class="download">Download</a> 
       </div> 

       <div class="item"> 
        <a href="/" class="support">Support</a> 
       </div> 

       <div class="item"> 
        <a href="/" class="contacts">Contacts</a> 
       </div> 
      </div> 
     </div> 

     <div class="middle table-positioning"> 
      <div class="row-positioning"> 
       <div class="left-column"> 
        <div class="content"> 
         <div class="block product angled-stripes"> 
          <div class="title">BASIC Package</div> 

          <div class="body"> 
           <img src="product-green.png" /> 

           <span>blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah</span> 

           <div class="links"> 
            <a href="/" class="item">Details</a> 
            <a href="/" class="item">Download</a> 
           </div> 

           <a href="/" class="button">purchase now</a> 
          </div> 

          <div class="clearer"></div> 
         </div> 

         <div class="block product angled-stripes"> 
          <div class="title">FULL Package</div> 

          <div class="body"> 
           <span>lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</span> 
           <div class="links"> 
            <a href="/" class="item">Details</a> 
            <a href="/" class="item">Download</a> 
           </div> 

           <a href="/" class="button">purchase now</a> 
          </div> 

          <div class="clearer"></div> 
         </div> 

         <div class="block plain"> 
          <div class="title">Popular Products</div> 

          <ul class="green-arrow-markered"> 
           <li> 
            <a href="/">Set True Image 9.0</a> 
           </li> 

           <li> 
            <a href="/">Standard Recorder 6.5</a> 
           </li> 

           <li> 
            <a href="/">Disk Director Upgrade 4.56</a> 
           </li> 

           <li> 
            <a href="/">ZippeNotes 6.22</a> 
           </li> 
          </ul> 
         </div> 
        </div> 

        <div class="footer"> 
         &copy;<span class="bolder">Software Company</span> 

         <div class="links"> 
          <a href="/" class="item">Privacy Policy</a> 
          <a href="/" class="item">Terms of Use</a> 
          <div class="clearer"></div> 
         </div> 
        </div> 
       </div> 

       <div class="right-column"> 
        <div class="content"> 
         <div class="post"> 
          <div class="title green-title">Company Address</div> 
          <div class="image"><img src="company-photo.jpg" alt="company photo"></div> 
          <div class="content"></div> 
         </div> 

         <div class="post left-post"> 
          <div class="title">Contact Form</div> 

          <form action="#" onsubmit="javascript:void(0);"> 
           <div class="input"> 
            <label for="name">Your full name:</label> 
            <input id="name" name="name" type="text" /> 
           </div> 

           <div class="input"> 
            <label for="email">E-mail address:</label> 
            <input id="email" name="email" type="text" /> 
           </div> 

           <div class="input"> 
            <label for="phone">Your phone:</label> 
            <input id="phone" name="phone" type="text" /> 
           </div> 

           <div class="input"> 
            <label for="message">Your message</label> 
            <textarea name="message" id="message" cols="30" rows="10"></textarea> 
           </div> 

           <input type="submit" /> 
          </form> 

          <div class="row"> 
           <a href="#" class="button">reset</a> 
           <a href="#" class="button">submit</a> 
          </div> 
         </div> 

         <div class="highlighted-block post"> 

          <div class="title green-title"> 
           <img src="newsletter" alt="newsletter icon" /> 

           <div> 
            <span class="uppercase">newsletter</span><br /><span class="sub-title">signup</span> 
           </div> 
          </div> 

          <div class="clearer"></div> 

          <form action="#" onsubmit="javascript:void(0);"> 
           <label for="newsletter-name">Enter your name, please:</label> 
           <input id="newsletter-name" name="name" type="text" /> 

           <label for="newsletter-email">Enter your e-mail, please:</label> 
           <input id="newsletter-email" name="email" type="text" /> 

           <a href="#" class="button">subscribe now</a> 
          </form> 

          <div> 
           <strong>Note:</strong> 
           <span>lorem ipsum ololo!</span> 
          </div> 
         </div> 

         <div class="clearer"></div> 
        </div> 

        <div class="footer"> 
         <div class="links"> 
          <a href="#" class="item">Home</a> 
          <a href="#" class="item">Products</a> 
          <a href="#" class="item">Download</a> 
          <a href="#" class="item">Support</a> 
          <a href="#" class="item">Contacts</a> 
          <a href="#" class="item">Login</a> 
          <a href="#" class="item">Sitemap</a> 
          <div class="clearer"></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="bottom"> 
     </div> 
    </body> 
</html>

CSS：

html, body { 
    margin: 0 0 80px 0; 
    padding: 0; 
    background-color: #313131; 
    color: #fff; 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    font-size: 12px; 
} 

a, a:hover, a:visited { 
    color: #fff; 
} 

/*.links .item:nth-child(n+2):before { 
    content: '|'; 
} 
*/ 

.links .item:nth-child(n+2) { 
    margin-left: 10px; 
    padding-left: 10px; 
    border-left: 1px solid #9C9C9C; 
} 

.links .item { 
    color: #9c9c9c; 
    float: left; 
    display: inline-block; 
} 

.links a.item:visited { 
    color: #9c9c9c; 
} 

.links a.item:hover { 
    color: #9c9c9c; 
} 

.bolder { 
    font-weight: bold; 
} 

.footer { 
    color: #9c9c9c; 
} 

.middle .left-column .content .block.product:nth-child(n+1) { 
    /*background: #8dc63f;*/ 
    background-color: #86bc3c; 
    /*background-size: 25px 25px;*/ 
    /*box-shadow: 1px 1px 8px #77ad32;*/ 
} 

.middle .left-column .content .block.product:nth-child(n+2) { 
    /*background: #ee8911;*/ 
    background-color: #ee8911; 
    /*background-size: 25px 25px;*/ 
    /*box-shadow: 1px 1px 8px #eb7e0e;*/ 
} 

.middle .left-column .content .block.product .title { 
    border-radius: 5px 5px 0 0; 
    padding-left: 20px; 
    text-shadow: 2px -1px 1px black; 
    min-height: 40px; 
    line-height: 40px; 
    vertical-align: middle; 
} 

.middle .left-column .content .block.product:nth-child(n+1) .title { 
    background: #6ce25d; /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: -moz-linear-gradient(top, #6ce25d 16%, #4ebb30 36%, #bee884 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,#6ce25d), color-stop(36%,#4ebb30), color-stop(100%,#bee884)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #6ce25d 16%,#4ebb30 36%,#bee884 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6ce25d', endColorstr='#bee884',GradientType=0); /* IE6-8 */ 
} 

.middle .left-column .content .block.product:nth-child(n+2) .title { 
    background: #db8a08; /* Old browsers */ 
    background: -moz-linear-gradient(top, #db8a08 17%, #c76307 36%, #ef9366 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(17%,#db8a08), color-stop(36%,#c76307), color-stop(100%,#ef9366)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #db8a08 17%,#c76307 36%,#ef9366 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #db8a08 17%,#c76307 36%,#ef9366 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #db8a08 17%,#c76307 36%,#ef9366 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #db8a08 17%,#c76307 36%,#ef9366 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#db8a08', endColorstr='#ef9366',GradientType=0); /* IE6-8 */ 
} 

.middle .left-column .content .block .body .links .item:nth-child(n+2) { 
    border-left-color: #fff; 
} 

.middle .left-column .content .block .body .links .item { 
    color: #fff; 
} 

.middle .left-column .content .block.product .body img { 
    width: 30%; 
    float: left; 
    margin: 10px; 
} 

.middle .left-column { 
    width: 20%; 
    max-height: 350px; 
} 

.middle .right-column { 
    width: 65%; 
} 

.middle .right-column .content { 
    background-color: #fff; 
    border-radius: 5px; 
    border: 3px solid #1c1c1c; 
} 

.top .header .quick-links .item { 
    color: #fff; 
} 

.top .header { 
    font-size: 10pt; 
} 

.top .header .right-menu { 
    display: inline-block; 
    position: absolute; 
    right: 20px; 
    top: 20px; 
} 

.top .header .right-menu .quick-links { 
    display: block; 
    float: right; 
    margin: 20px 0; 
} 

.top .header .right-menu .quick-search { 
    display: block; 
    height: 20px; 
    line-height: 10px; 
} 

.top .header .right-menu .quick-search form { 
    margin-right: -10px; 
} 

.top .header .right-menu .quick-search form * { 
    display: inline-block; 
    float: left; 
    margin: 0 3px; 
} 

.button { 
    color: #fff !important; 
    text-transform: uppercase; 
    display: inline-block; 
    background-color: #a4dff2; 
    border: 1px solid #027499; 
    text-decoration: none; 
    font-family: Arial; 
    font-weight: bold; 
    text-shadow: #17688d; 
    font-size: 10pt !important; 
    text-align: center; 
    min-width: 70px; 
    max-height: 20px; 
    padding: 5px 5px; 
    border-radius: 3px; 
    text-shadow: 1px -1px 1px #000; 

    background: #69ace0; /* Old browsers */ 
    background: -moz-linear-gradient(top, #69ace0 14%, #207cca 38%, #7db9e8 66%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(14%,#69ace0), color-stop(38%,#207cca), color-stop(66%,#7db9e8)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #69ace0 14%,#207cca 38%,#7db9e8 66%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #69ace0 14%,#207cca 38%,#7db9e8 66%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #69ace0 14%,#207cca 38%,#7db9e8 66%); /* IE10+ */ 
    background: linear-gradient(to bottom, #69ace0 14%,#207cca 38%,#7db9e8 66%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#69ace0', endColorstr='#7db9e8',GradientType=0); /* IE6-8 */ 
} 

.top { 
    height: 220px; 
} 

.top .header { 
    background-color: #09aad3; 
    /*background-size: 25px 25px;*/ 
    box-shadow: 1px 1px 8px #0480a7; 
    height: 115px; 
} 

.top .header .logo { 
    width: 300px; 
    height: 50px; 
    margin: 20px 25px; 
    border-radius: 6px; 
    background-color: #027297; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: inline-block; 
} 

.top { 
    text-align: center; 
} 

.top .top-menu { 
    display: block; 
    height: 100px; 
    text-align: center; 
} 

.top .top-menu .item { 
    width: 190px; 
    height: 100px; 
    background-color: #363636; 
    display: inline-block; 
    margin: 0 -3px; 
    vertical-align: middle; 
    line-height: 50px; 
    /*font-family: Arial;*/ 
    font-size: 14pt; 
    border: 1px solid #000; 
    border-radius: 4px; 
} 

.top .top-menu .item a { 
    text-decoration: none; 
} 

.middle .left-column .content .block .body { 
    margin: 10px; 
} 

.middle .left-column .content .block { 
    /*padding: 10px;*/ 
    border-radius: 10px; 
    width: 225px; 
    max-width: 225px; 
    font-size: 12px; 
    margin: 7px; 
    border: 3px solid #1b1b1b; 
} 

.middle .left-column .content .block.plain { 
    background-color: #3f3f3f; 
    padding: 10px; 
    width: 205px; 
} 

.middle .left-column .content .block .title { 
    font-size: 16pt; 
} 

.middle .left-column .content .block.plain ul { 
} 

.middle .left-column .footer { 
    margin-left: 7px; 
} 

ul.green-arrow-markered { 
    list-style: disc outside url("list-bullet.gif"); 
    padding-left: 15px; 
} 

.left-column { 
    padding-left: 5px; 
} 

.clearer { 
    clear: both; 
} 

.angled-stripes { 
    /* 
    background-color: #09aad3; 
    box-shadow: 1px 1px 8px #0480a7; 
    linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 
    */ 

    background-image: /* Safari 5 and earlier */ 
     -webkit-gradient(linear, 100% 100%, 0 0, 
     color-stop(.25, rgba(255, 255, 255, 0.2)), 
     color-stop(.25, rgba(255, 255, 255, 0)), 
     color-stop(.5, rgba(255, 255, 255, 0)), 
     color-stop(.5, rgba(255, 255, 255, 0.2)), 
     color-stop(.75, rgba(255, 255, 255, 0.2)), 
     color-stop(.75, rgba(255, 255, 255, 0)), 
     color-stop(1, rgba(255, 255, 255, 0))); 

    background-image: /* Chrome and Webkit Nightly build */ 
     -webkit-linear-gradient(45deg, 
     rgba(255, 255, 255, 0.2) 25%, 
     rgba(255, 255, 255, 0) 25%, 
     rgba(255, 255, 255, 0) 50%, 
     rgba(255, 255, 255, 0.2) 50%, 
     rgba(255, 255, 255, 0.2) 75%, 
     rgba(255, 255, 255, 0) 75%, 
     rgba(255, 255, 255, 0) 100% 
     ); 

    background-image: /* Firefox */ 
     -moz-linear-gradient(45deg, 
     rgba(255, 255, 255, 0.2) 25%, 
     rgba(255, 255, 255, 0) 25%, 
     rgba(255, 255, 255, 0) 50%, 
     rgba(255, 255, 255, 0.2) 50%, 
     rgba(255, 255, 255, 0.2) 75%, 
     rgba(255, 255, 255, 0) 75%, 
     rgba(255, 255, 255, 0) 100% 
     ); 

    background-image: /* IE10 */ 
     -ms-linear-gradient(45deg, 
     rgba(255, 255, 255, 0.2) 25%, 
     rgba(255, 255, 255, 0) 25%, 
     rgba(255, 255, 255, 0) 50%, 
     rgba(255, 255, 255, 0.2) 50%, 
     rgba(255, 255, 255, 0.2) 75%, 
     rgba(255, 255, 255, 0) 75%, 
     rgba(255, 255, 255, 0) 100% 
     ); 

    background-image: /* opera 11+ */ 
     -o-linear-gradient(45deg, 
     rgba(255, 255, 255, 0.2) 25%, 
     rgba(255, 255, 255, 0) 25%, 
     rgba(255, 255, 255, 0) 50%, 
     rgba(255, 255, 255, 0.2) 50%, 
     rgba(255, 255, 255, 0.2) 75%, 
     rgba(255, 255, 255, 0) 75%, 
     rgba(255, 255, 255, 0) 100% 
     ); 

    background-image: 
     linear-gradient(45deg, 
     rgba(255, 255, 255, 0.2) 25%, 
     rgba(255, 255, 255, 0) 25%, 
     rgba(255, 255, 255, 0) 50%, 
     rgba(255, 255, 255, 0.2) 50%, 
     rgba(255, 255, 255, 0.2) 75%, 
     rgba(255, 255, 255, 0) 75%, 
     rgba(255, 255, 255, 0) 100% 
     ); 

    background-size: 15px 15px; 
    -moz-background-size: 15px 15px; 
    -webkit-background-size: 15px 15px; 
    -o-background-size: 15px 15px; 
    -ms-background-size: 15px 15px; 
} 

input[type=submit], input[type=button] { 
    display: none; 
} 

.middle { 
    position: relative; 
    width: 100%; 
    margin: 0; 
} 

.middle .right-column { 
    color: #000; 
    width: 80%; 
    position: absolute; 
    top: 0; 
} 

.table-positioning { 
    display: table; 
    width: 100%; 
} 

.table-positioning .row-positioning { 
    display: table-row; 
    padding-left: 20px; 
} 

.table-positioning .row-positioning .cell-positioning { 
    display: table-cell; 
} 

.middle .left-column, .middle .right-column { 
    display: table-cell; 
} 

.middle .right-column .post .title { 
    font-size: 16pt; 
    color: #09aad3; 
} 

.green-title { 
    color: #4ebb30 !important; 
} 

.blue-title { 
    color: #09aad3 !important; 
} 

.uppercase { 
    text-transform: uppercase; 
} 

.middle .right-column .post .title { 
    padding: 10px 0; 
    margin: 10px; 
    border-bottom: 1px solid #bebebe; 
} 

.middle .right-column .post form input, .middle .right-column .post form label, .middle .right-column .post form textarea { 
    display: block; 
    width: 100%; 
} 

.middle .right-column .post form input[type=submit], .middle .right-column .post form input[type=button] { 
    display: none; 
} 

.middle .right-column .post .image { 
    display: inline-block; 
    border: 1px solid #bebebe; 
    border-radius: 4px; 
    padding: 3px; 
} 

.middle .right-column .post .image img { 
    border: none; 
    min-width: 124px; 
    min-height: 124px; 
    width: 124px; 
    height: 124px; 
    max-width: 124px; 
    max-height: 124px; 
} 

.middle .right-column .post .content { 
    margin: 10px; 
    border: none; 
    border-radius: 0; 
    border-bottom: 1px solid #bebebe; 
} 

.middle .right-column .post { 
    padding: 0 20px; 
} 

.split-content { 
    display: table; 
} 

.highlighted-block { 
    border: 1px solid #bebebe; 
    border-radius: 6px; 
    background-color: #eeeeee; 
    margin: 20px; 
    min-height: 420px; 
    width: 300px; 
    float: right; 
    display: inline-block; 
} 

.middle .right-column .left-post { 
    float: left; 
    display: inline-block; 
    width: 500px; 
} 

.middle .right-column .left-post .row { 
    clear: both; 
    display: inline-block; 
    float: right; 
} 

.highlighted-block img { 
    display: inline-block; 
    float: left; 
} 

.highlighted-block .title { 
    display: block; 
    height: 110px; 
} 

.highlighted-block .title div { 
    display: inline-block; 
} 

.highlighted-block .title img { 
    display: inline-block; 
    float: left; 
    width: 100px; 
    margin: 10px; 
    height: 100px; 
} 

.middle .right-column .post .button { 
    float: right; 
    margin-left: 10px; 
} 

.middle .right-column .cell-positioning.post { 
    margin: 20px; 
} 

.cell-positioning.wider { 
    width: 65%; 
} 

.middle .right-column .post .input { 
    display: block; 
    position: relative; 
    margin: 10px; 
    float: left; 
    clear: both; 
    width: 100%; 
} 

.middle .right-column .post .input * { 
    display: inline-block !important; 
    width: 50%; 
} 

.middle .right-column .post .input input, .middle .right-column .post .input textarea { 
    position: absolute; 
    right: 0; 
} 

.middle .right-column .footer .links { 
    float: right; 
    margin: 5px 10px; 
}

正如你所看到的，我有一個塊，.middle，包含左部分，left-column和右邊部分，.right-column。

右列僅包含一個元素 - .content。但該容器的元素可以遞歸地分成幾列（它包含兩列，其中一列包含兩列，其中一列包含兩列...）。

所以我嘗試使用CSS3 display: table;,display: table-row;和display: table-column;屬性。不知怎的，它幫助了我。一點點。我試圖對當前的問題應用相同的更改，但似乎沒有工作。所以，我決定嘗試的<div>方法。問題在於包含標籤及其輸入的<div>未按最大兒童身高（<textarea>比<label>大得多，但容器的高度與標籤的高度一樣大）。

我有基於此信息兩個問題：

  1. 爲什麼發生以及如何阻止它「高度聯合早報」？

  2. 我應該怎麼做佈局來讓我的代碼現代化，愚蠢簡單（KISS），但仍然有反應？

    3.

來源

2012-12-14 shybovycha

+0

你明白CSS框模型的工作原理吧？ http://css-tricks.com/the-css-box-model/ – cimmanon

+0

@cimmanon僅限基礎知識。所以呢？ – shybovycha

回答

7

爲什麼這樣的事情「的高度誤判」發生，如何預防呢？

這是因爲您正在使用容器內所有對象的float。花車有點奇怪，所以我推薦閱讀this CSS-Tricks article on them。

總之，當你浮動一個元素時，你將它從文檔流中取出。當（非浮動）容器中的所有元素都浮動時，父級認爲它沒有任何子元素，因此會摺疊。有您能解決這個問題的幾種方法：

  1. 父容器設置overflow: hidden（這一點，如果容器不具有特定的高度只有真正的作品）
  2. 添加clear: both到元素的浮動元素後，立即，在父容器內部（這個效果很好，但是如果你特別爲此添加元素，可能會增加額外的標記）
  3. 利用:after僞元素的威力（這隻適用於支持它的瀏覽器;好消息是儘管可能需要polyfill，但大多數人都這樣做）。

我應該怎麼辦元素的佈局把我的代碼現代，太簡單（KISS），但響應？

從我在這裏可以看到，你正在做一些讓你的工作比必要的更困難的事情。在我看來，你錯過了一些基本面。

您可能想要更多地瞭解語義標記。您正在經歷我們在交易中稱爲「divitis」的情況。也就是說，你正在包裝<div>標籤，這些標籤可能更適合其他元素。

例如，每次您使用<div class="item">的地方，你可以改變一個無序列表（<ul>）和每一個「項目」是一個列表項（<li>）。這樣可以避免將課程附加到絕對一切。

另外，您不必用按鈕重新發明輪子。有一個input type=button和<button>元素。使用其中的任何一個都會打開form.submit操作，然後您可以將其鉤入（而不是重新創建它）。

你也不應該需要長達半打選擇器的CSS選擇器鏈。看看如何CSS and specificity works，或者你會在相對不遠的將來造成偏頭痛。

我推薦拿起Dan Cederholm's Handcrafted CSS and Bulletproof Web Design，並仔細閱讀A List Apart和CSS-Tricks，以更好地把握CSS和HTML在基礎層面。

來源

2012-12-14 20:51:25 Shauna

+0

感謝您的好評！我喜歡那些回答如此深刻和清楚的人）=然而，增加'overflow：hidden;'或'clear：both;'並不能解決我的問題=（ – shybovycha

+0

嘗試添加'

'（它增加了'clear：both; ）在__'.item' elements__，__'
'element__，__'