爲什麼「display：inline;」打破這個HTML文件？

-5

我最近一直在theoaddis.com上重新設計我的網站，並且遇到了一個非常奇怪的錯誤。在下面的代碼中，當我添加「display：inline;」時到「.one」，「.two」和「.three」，當我運行它時，代碼幾乎中斷。代碼是爲什麼「display：inline;」打破這個HTML文件？

<!DOCTYPE html> 
<html> 
    <head> 
    <title> 
     Theo Addis | Homepage 
    </title> 
    <style> 
     body { 
     color: #333333; 
     } 
     .header { 
     background-color: #8386FF; 
     height: 110px; 
     width: 1024px; 
     line-height: 110px; 
     text-align: center; 
     } 
     .head { 
     display: inline; 
     } 
     .head, h1 { 
     padding-right: 100px; 
     } 
     .head, h4 { 
     padding-left: 100px; 
     } 
     .navbar { 
     background-color: #95E857; 
     width: 1024px; 
     height: 60px; 
     line-height: 60px; 
     text-align: center; 
     } 
     ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     } 
     li { 
     display: inline-block; 
     padding-left: 50px; 
     padding-right: 50px; 
     font-size: 30px; 
     } 
     a { 
     text-decoration: none; 
     color: #8386FF; 
     } 
     a:visited { 
     color: #E85780; 
     } 
     a:hover { 
     color: #74F0FF; 
     } 
     a:active { 
     color: #E85780; 
     } 
     .one { 
     background-color: #FFCB6C; 
     height: 300px; 
     width: 200px; 
     text-align: left; 
     line-height: 50px; 
     display: inline; 
     } 
     .mar { 
     margin: 10px; 
     } 
     .two { 
     background-color: #E85780; 
     width: 600px; 
     height: 500px; 
     text-align: center; 
     display: inline; 
     } 
     .three { 
     background-color: #FFCB6C; 
     height: 300px; 
     width: 200px; 
     text-align: right; 
     line-height: 50px; 
     display: inline; 
     } 
     .h1 { 
     font-size: 2em; 
     } 
     .h2 { 
     font-size: 1.5em; 
     } 
    </style> 
    </head> 
    <body> 
    <center> 
     <div class="header"> 
     <h1 class="head">Theo Addis dot com</h1> 
     <h4 class="head">Welcome to Theo Addis's personal website!</h4> 
     </div> 
     <div class="navbar"> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="links.html">Links</a></li> 
      <li><a href="website.html">Website Production</a></li> 
     </ul> 
     </div> 
     <div class="one"> 
     <h3 class="mar"> 
      Did you know... 
      There are more possible iterations of a game of chess than there are atoms in the known universe! 
     </h3> 
     </div> 
     <div class="two"> 
     <!--<h1>Welcome to Theo Addis dot com!</h1>--> 
     <!--<h2>This website is basically like a blog, but I won't be</h2>--> 
     <!--<h2>updating it much (or ever!)</h2>--> 
     <!--<h3>There is an About section, which feautures some</h3>--> 
     <!--<h3>information about me,</h3>--> 
     <!--<h3>a Links section, which showcases some of the websites</h3>--> 
     <!--<h3>I have designed and programmed,</h3>--> 
     <!--<h3>and a Website Production page, where you can find out</h3>--> 
     <!--<h3>how I create my websites, and how you can too!</h3>--> 
     <!--<h1>Enjoy!</h1>--> 
     <h3 class="mar"> 
      <span class="h1">Welcome to Theo Addis dot com!</span><br><br> 
      <span class="h2">This website is basically like a blog, but I won't be updating it much <br>(or ever!)</span><br><br> 
      There is an about section, which feautures some information about me, a Links section, which showcases some of the websites I have designed and programmed, and a Website Production page, where you can find out how I create my websites, and how you can too! 
      <br><br> 
      <span class="h1">Enjoy!</span> 
     </h3> 
     </div> 
     <div class="three"> 
     <h3 class="mar"> 
      Did you know... 
      Honey does not spoil. You could feasibly eat 3000 year old honey! 
     </h3> 
     </div> 
    </center> 
    </body> 
</html>

謝謝！

來源

2016-04-05 Theo Addis

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**。雖然您提供了[**鏈接到示例或網站**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-如果鏈接變得無效，那麼你的問題對於其他具有相同問題的未來SO用戶將沒有任何價值。 –

「當我添加」display：inline;「到」.one「，」.two「和」.three「時，代碼在運行時幾乎中斷」。那麼，不要添加它。 – Alohci

<div>默認情況下是塊標記，如果您給display:inline它將忽略其塊性質，所以使用display:inline-block。

CSS

.one { 
    background-color: #FFCB6C; 
    height: 300px; 
    width: 200px; 
    text-align: left; 
    line-height: 50px; 
    display: inline-block; 
    } 
    .two { 
    background-color: #E85780; 
    width: 600px; 
    height: 500px; 
    text-align: center; 
    display: inline-block; 
    } 
    .three { 
    background-color: #FFCB6C; 
    height: 300px; 
    width: 200px; 
    text-align: right; 
    line-height: 50px; 
    display: inline-block; 
    }

來源

2016-04-05 09:43:53

爲什麼「display：inline;」打破這個HTML文件？

回答

相關問題