Question

所以我想让我的网站流畅。所以我开始使用我的包装器和标头。 css：

#wrapper {

  max-width:1600px;
    width:100%;
    margin:0 auto;

}

#header {

      margin: 0 auto;
      width: 100%;
      height: 7.5%;
      background-color: #0066FF;
      display: table-cell;
      vertical-align: middle;

    }

HTML：

<div id="wrapper">
        <div id="header">
            <div id="logo_wrapper">
                <span class="logonaam1">O</span><span class="logonaam2">b</span><span class="logonaam1">l</span><span class="logonaam2">e</span><span class="logonaam1">c</span><span class="logonaam2">t</span><span class="logonaam1">a</span><span class="logonaam2">r</span><span class="logonaam1">e</span>
            </div>
                <form action="login.php" method="post">
                    <div id="aanmeldform_submit">
                        <input type="submit" name = "submit_login" value="Aanmelden" id="submit_knop" />
                    </div>

                    <div id="aanmeldform_wachtwoord">
                        <input type="password" name ="password" value="" id="aanmeld_knop" required placeholder="Voer je wachtwoord in" />   
                    </div>

                    <div id="aanmeldform_email">
                        <input type="email" name="email" value="" id="aanmeld_knop" required placeholder="Voer je e-mail in" autofocus/>   
                    </div>
                </form>
        </div>

标题应该跨越屏幕的整个宽度，就像包装一样。但由于某种原因，当我将标题的宽度也设置为100％时，标题仅为屏幕的1/3。当我将标题的宽度更改为大约1 - 10％时，由于某种原因它会跨越整个宽度。谁知道是什么原因导致的？还包括一个小提琴，以便更好地理解：http://jsfiddle.net/4J7JJ/

当您将小提琴中的标题设置为1％时，您可以看到它确实跨越了整个宽度...

提前致谢！

Answer 1

尝试更改显示

#header {

      margin: 0 auto;
      width: 100%;
      height: 7.5%;
      background-color: #0066FF;
      display: inline-table; /* that fix the problem */
      vertical-align: middle;

    }

制作标题＆amp;包装液/响应％似乎不起作用

1 个答案: