我在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;
}
答案 0 :(得分: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;}
答案 1 :(得分:2)
对h2和tabjob使用display:inline-block
:
h2, #tabjob { display: inline-block }
答案 2 :(得分:1)
ul
和div
是块元素,这意味着它们总是低于它们之前的任何内容:
a<div>x</div>
会给你两行。试试
a<div style='display: inline'>x</div>