如何将文本和选项卡式导航放在一起

时间:2012-05-23 07:10:15

标签: html css css3 haml

我在h2中写了一个文本,然后我想显示一个标签式导航,但是标签式导航没有放在它旁边,它在h2下面,如下面的灰色框内的图片所示:

enter image description here

以下是我的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;
}

3 个答案:

答案 0 :(得分:2)

我已经在评论中发布了答案,只是在这里添加答案的详细信息。

DEMO is HERE

由于您的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;}

答案 1 :(得分:2)

对h2和tabjob使用display:inline-block

h2, #tabjob { display: inline-block }

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

答案 2 :(得分:1)

uldiv是块元素,这意味着它们总是低于它们之前的任何内容:

 a<div>x</div>

会给你两行。试试

 a<div style='display: inline'>x</div>