html - 为什么缩放页面时文字会换行？

Question

我有这个代码:

body {
  background-color: #f1f1f1;
}

#body {
  width: 1040px;
  height: 1319px;
  margin: 0 auto;
  background-color: gray;
}

#header {
  width: 76%;
  background-color: yellow;
  float: left;
}

#header #logo {
  width: 49%;
  background-color: white;
  float: left;
}

#header #logo img {
  float: left;
}

#header #logo p {
  margin-top: 30px;
  font-weight: bold;
  color: #aeaeae;
}

#header #login {
  width: 51%;
  height: 79px;
  background-color: white;
  float: left;
}

#header #login form {
  padding: 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DCDCDC), color-stop(1, #F3F3F3));
  background-image: -o-linear-gradient(bottom, #DCDCDC 0%, #F3F3F3 100%);
  background-image: -moz-linear-gradient(bottom, #DCDCDC 0%, #F3F3F3 100%);
  background-image: -webkit-linear-gradient(bottom, #DCDCDC 0%, #F3F3F3 100%);
  background-image: -ms-linear-gradient(bottom, #DCDCDC 0%, #F3F3F3 100%);
  background-image: linear-gradient(to bottom, #DCDCDC 0%, #F3F3F3 100%);
  margin-top: 38px;
}

#header #login form input[type="text"],
#header #login input[type="password"] {
  width: 98px;
  height: 17px;
}

#header #login form input[type="submit"] {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F1A62D), color-stop(1, #F56E00));
  background-image: -o-linear-gradient(bottom, #F1A62D 0%, #F56E00 100%);
  background-image: -moz-linear-gradient(bottom, #F1A62D 0%, #F56E00 100%);
  background-image: -webkit-linear-gradient(bottom, #F1A62D 0%, #F56E00 100%);
  background-image: -ms-linear-gradient(bottom, #F1A62D 0%, #F56E00 100%);
  background-image: linear-gradient(to bottom, #F1A62D 0%, #F56E00 100%);
  border: none;
  border-radius: 5px;
  color: white;
  width: 70px;
  height: 22px;
  margin-left: 5px;
  font-family: Arial;
}

#header #navbar {
  width: 100%;
  background-color: magenta;
  float: left;
}

#sidebar {
  height: 890px;
  width: 24%;
  background-color: brown;
  float: right;
}

#content {
  width: 76%;
  background-color: red;
  float: left;
}

#footer {
  width: 76%;
  background-color: gold;
  float: left;
}

<div id="body">
  <div id="sidebar">
    <h1>Sidebar</h1>

    <div id="register"></div>
    <div id="credit"></div>
    <div id="cenik"></div>
    <div id="cards"></div>
  </div>
  <div id="header">
    <div id="logo">
      <img src="img/logo.png" alt="Logo" width="185" height="79">
      <p>aaaaaaa</p>
    </div>
    <div id="login" id="loginBox">
      <form action="#">
        <label for="username">Jméno:</label>
        <input type="text" name="username" class="usernameTxt">
        <label for="password">Heslo:</label>
        <input type="password" name="password" class="passwordTxt">
        <input type="submit" name="submit" value="Přihlásit">
      </form>
    </div>
    <div id="navbar">
      <h1>Navbar</h1>

    </div>
  </div>
  <div id="content">
    <h1>Content</h1>

    <div id="reklama"></div>
    <div id="topPanel"></div>
    <div id="botPanel"></div>
  </div>
  <div id="footer">
    <h1>Footer</h1>

  </div>
</div>

问题是，当我缩小 Logo 附近的文本时，登录按钮会换行。我尝试了 white-space:nowrap 和 overflow:hidden 但它没有用。

Answer 1

我能够添加 white-space:nowrap;到 <form> 的 css元素本身:

#login > form {
     white-space:nowrap;   
}

它似乎可以满足您的要求(至少在 Chrome 中 :))

这是一个 JSFiddle:https://jsfiddle.net/q8ysk30z/

更新

我找到了一种解决问题的方法，基本上是将表单元素粘贴到其容器的右下角 (#login)。

#login { 
    position: relative; 
}

#login > form { 
    white-space: nowrap;
    position: absolute;
    right: 0; bottom: 0; 
}

https://jsfiddle.net/q8ysk30z/2/