1

h2内にテキストを書き、その横にタブ付きナビゲーションを表示したいのですが、そのタブ付きナビゲーションはその隣に配置されていません。その灰色のボックス内の次の画像に示すように、h2の下に移動します:

ここに画像の説明を入力

以下は、HTMLページの私のコードです：

<header>

   <h2>
     Corporate
     jobpost
   </h2>


    <div id='tabjob'>

         <ul>
           <li>
              <a class='innertab selectprofile' href='#YourJobposts'>Your Jobposts</a>
           </li>
           <li>
              <a class='innertab signupprofile' href='#OtherJobposts'>Other Jobposts</a>
           </li>
           <li>

              <a class='innertab signupprofile' href='#Appliedfor'>Applied for</a>
           </li>
         </ul>
    </div>
</header>

ヘッダーは、画像内の灰色のものです。このヘッダー内にテキストを表示したい、そのタブ付きナビゲーションの隣に、そのボタンの隅に

以下は、このタブ付きナビゲーションの CSS です。

#tabjob
{
  padding-top:0px;
  padding-left:10px;
    height:0px;

}

.innertab
{
    background-color: rgba(142, 194, 218, 0.3);display: block;height: 25px;
    line-height: 30px;text-align: center;
    width: auto;float: left;font-weight: bold;
    padding-left: 8px;
    padding-right: 8px;

  text-shadow: #eee 0px 0px 2px;
}
#tabjob ul li
{
 display:block;
}
4

3 に答える 3

2

display:inline-blockh2とtabjobの両方に使用します。

h2, #tabjob { display: inline-block }

デモ：http ：//dabblet.com/gist/2774902

于 2012-05-23T11:23:56.270 に答える
2

ここに回答の詳細を追加するだけで、回答をコメントに投稿しました。

デモはこちら

h2タグとすべての見出しタグは HTML のブロック要素であるため、使用可能な幅全体が必要です。

タグが完全な幅になるのを避けるh2には、この要素に {float:left} を追加するだけです

このスタイルを特定のものにh2 のみ適用するようにしてください。そうしないと、HTML が台無しになります。ページで複数のh2タグを使用していますか。

HTML

<h2 class="floatTag">Corporate jobpost</h2>
    <div id='tabjob'>
         <ul>
             <li>
                <a class='innertab ' href='#YourJobposts'>Your Jobposts</a>
              </li>
              <li>
                <a class='innertab ' href='#OtherJobposts'>Other Jobposts</a>
              </li>
              <li>

                <a class='innertab ' href='#Appliedfor'>Applied for</a>
              </li>
          </ul>
      </div>

CSS 

#tabjob
{
  padding-top:0px;
  padding-left:10px;
    height:0px;
}

.innertab
{
    background-color: rgba(142, 194, 218, 0.3);display: block;height: 25px;
    line-height: 30px;text-align: center;
    width: auto;float: left;font-weight: bold;
    padding-left: 8px;
    padding-right: 8px;

  text-shadow: #eee 0px 0px 2px;
}
#tabjob ul li
{
 display:block;
}

h2.floatTag{float:left;}
于 2012-05-23T10:27:48.563 に答える
1

ulとdivはブロック要素です。つまり、常にその前にあるものの下に移動します。

 a<div>x</div>

あなたに2行を与えるでしょう。試す

 a<div style='display: inline'>x</div>
于 2012-05-23T08:15:40.957 に答える