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

我已经在评论中发布了答案，只是在此处添加了答案的详细信息。

演示在这里

由于您的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 回答
2

用于display:inline-blockh2 和 tabjob：

h2, #tabjob { display: inline-block }

演示：http ://dabblet.com/gist/2774902

于 2012-05-23T11:23:56.270 回答
1

ul并且div是块元素，这意味着它们总是低于它们之前的任何东西：

 a<div>x</div>

会给你两条线。尝试

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