Question

我有一个标题，左侧有另一页的链接。我还需要在标题的中心添加标题，但不想使用导航栏。这可能吗？这是我的尝试，这是行不通的：

HTML：

<div class="header">
    <a href= "#"> Left Side Text </a>
    <p class = "header title">Title Text</p>
</div>

的CSS：

.header {
    height: auto;
    line-height: 50px;
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    font-size: 12px;
    text-align: left;
    padding-left: 50px;
}


.header .title {
    font-size: 18px;
    text-align: center;
}

小提琴：http://jsfiddle.net/Qf3w7/

Answer 1

这是您的jsfiddle

您只需要一个标题：

.header {
    height: auto;
    line-height: 50px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    top: 0;
    font-size: 12px;
    text-align: center;
    position: absolute;
}

左侧链接：

.header a{
    float: left;
    z-index: 1;
}

更新：实际上你需要位置：绝对在中心设置标题

Answer 2

您也可以将它们设置为内联块而不是浮点数。

DOM中彼此相邻的两个块元素将相同地流动为彼此相邻的两个单词。这样做的另一个好处是可以将包含元素的高度拉伸到子节点的高度，而无需担心清除浮动或设置溢出。需要注意的是，DOM元素标签必须紧挨着彼此出现，两者之间没有空格，因此它们没有间距问题

<aside>...</aside><!-- no spaces here --><article>...</article>

http://jsfiddle.net/cVJBW/

Answer 3

在您的简单情况下，我会将您的标题置于标题内，并确保您的链接始终位于z-index之上。

HTML：

<div class="header">
    <a href="#" class="link">
        <i class="fa fa-angle-left icon-white arrow"></i> 
        Left Side Text
    </a>
    <div class="title">Title Text</div>
</div>

CSS：

.link {
    position: relative;
    z-index: 1; /* Important, otherwise your link wouldn't be clickable. */
}

.title {
    font-size: 18px;
    text-align: center;
    border: 1px solid green;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

JSFiddle here

但请注意，如果您的标题或左侧文字太长，它们会相互重叠。

Answer 4

假设您正在寻找类似于移动导航的内容，请尝试将您的链接定位在绝对0的顶部和左侧，并且您的标题绝对顶部0和左右相等的值至少大于后面链接的宽度

<div class="header">
   <a class="back-link" href= "#"><i class="fa fa-angle-left icon-white arrow"></i> Left Side Text </a>
   <p class = "header title">Title Text</p>
</div>

.header .title {
    text-align:center;
    position:absolute;
    left:200px;
    right:200px;
    margin:0;
 }
.back-link{
      position:absolute;
      left:0;
 }

你可以看看小提琴：http://jsfiddle.net/P2n4G/

Answer 5

看看这个小提琴：http://jsfiddle.net/mLP82/

<div class="header">
<div class="titleContainer">TitleText</div>
<div class="linkContainer">Link</div>
</div>

和CSS

.header {
height: auto;
line-height: 50px;
width: 100%;
margin: 0;
padding: 0;
position: absolute;
top: 0;
font-size: 12px;
text-align: left;
padding-left: 50px;
}

.titleContainer {
text-align: center;
width: 100%;
font-size: 24px;    
position: absolute;
border: 1px solid red;
}

.linkContainer {
position: relative;
left: 10px;
top: 10px;
border: 1px solid green;
width: 50px;
height: 20px;
line-height: 20px;
padding: 0;
}

我改变了你的代码希望这能帮到你！

修改标题css以包含两个不同位置的文本

5 个答案: