Question

我基本上需要做的是将HEADER-TITLE div带到页面的顶部全宽，并将类OFFICIAL带到header-title底部的“官方网站”文本中，一个在标题标题的右侧但与其他EN dropdown相同的位置堆叠其他和inline block。

.header-title {
  background-color: white !important;
  width: 100%;
  position: absolute !important;
  top: 0;
  left: 0;
  margin: 0 auto;
  background-color: aqua;
}

<body class="en ch  homepage" style="background-image: url(&quot;./images/body-pattern.jpg&quot;);">
  <header id="headerInternas" class="home">
    <div class="header-top">
      <nav class="idioma dropdown">
        <a href="/#" class="dropdown-toggle ico_idioma" data-toggle="dropdown" itemprop="potentialAction"><span class="flag en"></span>
         EN
         <span class="caret"></span></a>
        <a href="javascript:void(0)" class="mireserva">
          <ul class="dropdown-menu dropMenu" role="menu">
            <li>
              <a href="#" class="idiomas" rel="alternate" hreflang="es">
                <div class="bandera"><span class="flag es"></span></div>
                <div class="idioma-texto"><span class="idiomasText">SPANISH
           </span>
                </div>
              </a>
            </li>
            <li class="active">
              <a href="/" rel="alternate" hreflang="en-default" class="idiomas">
                <div class="bandera"><span class="flag en"></span></div>
                <div class="idioma-texto"><span class="idiomasText">ENGLISH
         <i class="fa fa-check"></i></span>
                </div>
              </a>
            </li>
            <li>
              <a href="#" class="idiomas" rel="alternate" hreflang="de">
                <div class="bandera"><span class="flag de"></span></div>
                <div class="idioma-texto"><span class="idiomasText">GERMAN
      </span>
                </div>
              </a>
            </li>
          </ul>
          <div class="header-extra hidden-xs">
            <div class="official">
              <i class="fa fa-certificate"></i><span id="web-oficial">Official Website</span>
              <h1 id="nombre-hotel">
              </h1>
            </div>
          </div>
      </nav>
      <div class="header-title"><span>official website</span></div>
    </div>

需要从css实现不触摸html

Answer 1

您需要将自己的.header-title div包裹起来

Answer 2

我的意思是

 <header id="headerInternas" class="home">
<div class="header-top">
  <div class="header-title">
  <nav class="idioma dropdown">
    <a href="/#" class="dropdown-toggle ico_idioma" data-toggle="dropdown" 
     itemprop="potentialAction"><span class="flag en"></span>
     EN
     <span class="caret"></span></a>
    <a href="javascript:void(0)" class="mireserva">
      <ul class="dropdown-menu dropMenu" role="menu">
        <li>
          <a href="#" class="idiomas" rel="alternate" hreflang="es">
            <div class="bandera"><span class="flag es"></span></div>
            <div class="idioma-texto"><span class="idiomasText">SPANISH
       </span>
            </div>
          </a>
        </li>
        <li class="active">
          <a href="/" rel="alternate" hreflang="en-default" class="idiomas">
            <div class="bandera"><span class="flag en"></span></div>
            <div class="idioma-texto"><span class="idiomasText">ENGLISH
     <i class="fa fa-check"></i></span>
            </div>
          </a>
        </li>
        <li>
          <a href="#" class="idiomas" rel="alternate" hreflang="de">
            <div class="bandera"><span class="flag de"></span></div>
            <div class="idioma-texto"><span class="idiomasText">GERMAN
  </span>
            </div>
          </a>
        </li>
      </ul>
      <div class="header-extra hidden-xs">
        <div class="official">
          <i class="fa fa-certificate"></i><span id="web-oficial">Official Website</span>
          <h1 id="nombre-hotel">
          </h1>
        </div>
      </div>
  </nav>
  </div>
</div>

组织导航栏div元素

2 个答案: