Question

我最近在theoaddis.com重新设计了我的网站，并且遇到了一个非常奇怪的错误。在下面的代码中，当我添加“display：inline;”时对于“.one”，“。twwo”和“.three”，当我运行它时，代码几乎破坏了。代码是

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

谢谢！

Answer 1

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

为什么“显示：内联;”打破这个HTML文件？

1 个答案: