Question

在缩小Safari，Chrome和Opera时，我无法找到为什么标题的右侧部分位于左侧部分下方。

以下是标题的demo。

如果您在safari，chrome或opera中打开演示，您会看到标题的右侧部分位于标题左侧部分的下方。

当你在不同的浏览器中缩小时，我想让标题保持在一行。

这是我的代码。

HTML：

     <body class="body">
      <div id="white-background">

        <div class='top-head'>
          <div class='left'>
          <a class="logo"></a>
          <div id="search">
            <form id="searchbox">
              <input type="text" id="search-bar"  required placeholder="What are you looking for?">
              <input type="submit" id="submit" value="Search">
            </form> <!-- end of form id -->
          </div> <!-- end of search id -->

          </div> <!-- end of left class -->
          <div class='right'>
            <a class="login" href="#" alt="Login">Login</a>
            <a class="create-account" href="#" alt="create-account">Create Account</a>
            <div class="language-wrapper">
              <a class="language-icon" href="#" alt="choose-your-language">Language
                <div class="arrow-up"></div>
                <div class="arrow-down"></div>
              </a>

              <a class="delivery-country-icon" href="#" alt="choose-your-delivery-country">Delivery Country
                <div class="arrow-up"></div>
                <div class="arrow-down"></div>
              </a>
          </div> <!-- end of right class -->
        </div> <!-- end of top-head -->
      </div><!-- end of white-background class -->
    </div> <!-- end of body class -->

CSS：

     #white-background {
      width: 1024px;
      height: 1400px;
      background: white;
      position: relative;
      z-index: 0;
      margin: 0 auto 30px auto;
    }


    .top-head{ height: 45px; }

    .left{ padding-left: 15px; padding-top: 14px; float:left; }
    .right{ line-height: 24px; padding-top: 7px; padding-right: 15px; float:right; }

    .logo {
      background:url(http://placehold.it/140x20);
      background-position: left top;
      background-repeat: no-repeat;
      width: 140px;
      height: 20px;
      display: block;
      margin: 0px 0px 0px 0px;
      cursor: pointer;
    }

    #search {
      position: relative;
      margin-left: 150px;
      bottom: 25px;
    }
    #search-bar {
      display: inline-block;
      box-shadow: 0px 1px 0px #f2f2f2;    
      background: #fff;
      border: 1px solid #d3d3d3;
      height: 26px;
      padding-right: 80px;
      padding-left: 5px;
      color: #202020;
      font-size: 12px;
      font-family: 'Open Sans', Verdana, Arial;
    }

    #search-bar:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; }
    #search-bar:active { border: 1px solid #d13030; }

    #submit {
      box-shadow: 0px 1px 0px #f2f2f2;    
      background: #f8f8f8;
      border: 1px solid #d3d3d3;
      width: 80px;
      height: 26px;
      font-size: 12px;
      font-weight: bold;
      font-family: 'Open Sans', Verdana, Arial;
      color: #656565;
    }

    #submit:hover { border: 1px solid #c6c6c6; box-shadow: 0px 1px 0px #e5e5e5; color: #000; }
    #submit:active { background: #dcdcdc; color: #242424; }

    .login {
       font-weight: bold;
      border: 1px solid #d3d3d3;
      color: #202020;
      padding-right: 15px;
      padding-left: 15px;
      display: inline-block;
      font-size: 11px;  
      text-align: right;
      box-shadow: 0px 1px 0px #f2f2f2;
      text-decoration: none; 
      background: #f8f8f8;
    }

    .login:hover { 
      background: #f4f4f4;
      box-shadow: 0px 1px 0px #e5e5e5;
    }

    .create-account {
      font-weight: bold;
      border: 1px solid #d13030;
      color: #fff;
      padding-right: 15px;
      padding-left: 15px;
      display: inline-block;
      font-size: 11px;  
      text-align: right;
      text-decoration: none; 
      background: #d13030 ;
    }

    .create-account:hover {
      background: #c42d2d;
      box-shadow: 0px 1px 0px #e5e5e5;
     }

    .arrow-down {
      width: 0; 
      height: 0; 
      position: absolute;
      right: 5px;
      top: 40%;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;  
      border-top: 5px solid #202020;
    }

    .language-icon:hover .arrow-down:hover {
        border-top: 5px solid #d13030;


    }

    .language-icon:hover .arrow-up {
      width: 0; 
      height: 0;
      position: absolute;
      right: 5px;
      top: 40%; 
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid black;
    }

    .language-wrapper:hover .language-dropdown {
      opacity: 1;
      display: block;
    }
    .language-wrapper {
      display: inline-block;
    }
    .language-icon {
      border: 1px solid #d3d3d3;
      color: #202020;
      padding-right: 20px;
      padding-left: 27px;
      display: inline-block;
      font-size: 11px;  
      width: auto;
      text-align: right;
      text-decoration: none;
      box-shadow: 0px 1px 0px #f2f2f2;
      background: #f8f8f8 url("http://placehold.it/25x25") no-repeat 0 0 ;
      position: relative;
      left: 0; top: 0;
    }


    .language-icon:hover { 
      background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ; 
      color: #d13030;
      border: 1px solid #c6c6c6;
      box-shadow: 0px 1px 0px #e5e5e5;
     }

     .delivery-country-icon {
      position: relative;
      left: 0; top: 0;
      border: 1px solid #d3d3d3;
      color: #202020;
      padding-right: 20px;
      padding-left: 27px;
      display: inline-block;
      font-size: 11px;  
      text-align: right;
      text-decoration: none; 
      box-shadow: 0px 1px 0px #f2f2f2; 
      background: #f8f8f8 url("http://placehold.it/25x25") no-repeat top left ;
    }


    .delivery-country-icon:hover { 
      background: #fff url("http://placehold.it/25x25") no-repeat 0 -20px ;
      color: #d13030; 
      border: 1px solid #c6c6c6;
      box-shadow: 0px 1px 0px #e5e5e5;
    }

Answer 1

您可以通过为子元素（输入等）设置固定宽度来解决此问题。

但为什么你会缩放到25％？

将标题中的文本和图标保留在一行中

1 个答案: