Question

我写了 h2 内和旁边的文字, 我想显示一个制表位导航, 但标签式导航没有放在它旁边, 其位于h2以下, 如灰盒内以下图像所示 :

""https://i.sstatic.net/gUhLT.png" alt="此处输入图像描述"/ >

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

Answer 1

我已经在评论中公布了答案,只是在这里补充了答案的细节。

"http://jsfiddle.net/AMAVV/1/" rel="无跟随">DEMO在这里

您的 h2 标签和所有标题标签都是 HTML 中的块元素, 需要全部宽度。

以便避免 h2 标签, 以获取完整的宽度, 仅在此元素中添加 {float: left} {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;}

Answer 2

h2 和 tabjob 使用 display: inline- block 来使用 display: inline- block :

h2, #tabjob { display: inline-block }

说明:http://dabblet.com/gist/2774902' rel=“nofollow'>http://dabblet.com/gist/2774902

Answer 3

ul 和 div 是块元素,表示它们总是低于它们面前的值:

 a<div>x</div>

给您两句台词,试试看

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

友情链接