我想将“编辑”链接放在与标题相同的行上,在页面右侧,链接文本与标题文本的底部对齐。我想要这样的东西:
我的第一次尝试是:
<div>
<div style="float: left; width:600px;background-color: red">
<h1>Something</h1>
</div>
<div style="float: left; background-color: yellow ">
<a href=#>Edit</a>
</div>
</div>
但那给了我:
我已经尝试了很多东西让“编辑”在底部与“Something”对齐,但似乎都没有。
有人有任何建议吗?像这样把div中的所有内容包装成错误的方法吗?
提前感谢您的帮助。
编辑 - 呃,对不起,我把这两个图像混合在一起。文本是正确的,我希望链接文本与标题文本底部对齐。现在修好了。
感谢那些提出建议和意见的人。
我想出了更多的可能性(虽然我意识到退后一步并询问是否有更好的方法,在某些选项中我因此放宽了原始规格):
解决方案1:类似于chipcullen的建议,但在外部div中设置宽度。这样做的好处是可以将链接带到600px宽度范围内:
<div style="position: relative; width: 600px">
<h1>Solution 1</h1>
<a style="position: absolute; bottom: 0; right: 0;href="#">Edit</a>
</div><br/>
解决方案2:与(1)一样但是,但是使用我自己的类而不是H1,并允许链接向右浮动。这有利于(?)不必使用位置:绝对,但你仍然 需要设置margin-top。
<div style="width: 600px">
<span class="myHeader">Solution 2</span>
<a style="float: right; margin-top:14px;" href="#">Edit</a>
</div><br/>
解决方案3:与(2)一样,但使用h1并覆盖display属性。具有使用h1上其他地方定义的其他属性的优势:
<div style="width: 600px">
<h1 style="display:inline;">Solution 3</h1>
<a style="float: right; margin-top:14px;" href="#">Edit</a>
</div><br/>
解决方案4:将链接元素嵌套在h1中,并为链接设置样式,在这种情况下通过指定a Twitter Bootstrap按钮:
<div style="width: 600px">
<h1>Solution 4
<a class="btn" style="margin-top:4px;float: right;" href="#">Edit</a>
</h1>
</div>
他们似乎都工作,有没有人有任何想法哪个更好?解决方案2 - 4我觉得有点脆弱,因为硬连线边缘顶部设置取决于h1线高度,但同时他们觉得我更简洁。
答案 0 :(得分:3)
你可能不需要所有的div。如果你真的想让它表现出来,你总是可以使用position:absolute;
标记:
<header>
<h1>Something</h1>
<a class="edit_link" href="#">Edit</a>
</header>
CSS:
header {
position: relative;
}
h1 {
width: 600px;
}
.edit_link {
position: absolute;
top: 0;
right: 0;
}
我不是说这是唯一正确的方式,而是 方式。
答案 1 :(得分:0)
尝试将此css添加到编辑浮动
{
margin:0px;
padding:0px;
border:0px;
}
答案 2 :(得分:0)
您还可以为<div>
标记使用两个类。例如#header
和#header-right
。这是我通常使用的。
示例:
#header {
width: 98%;
min-width: 750px;
height : 45px;
margin : 0 auto;
padding-left: 1%;
padding-right: 1%;
padding-bottom : 4px;
color : #ffffff;
background: #999999;
border-bottom: 1px solid #000000;
}
#header-right {
padding-top: 10px;
padding-right: 10px;
float: right;
}
HTML:
<div id="header">
<h1 ><a href="http://mysite.com">MySite.com</a></h1>
<p>A site for me. Not you.</p>
<div id="header-right">
<p>Because who wants to share a website...</p>
</div>
</div>
答案 3 :(得分:0)
这对我有用:
HTML:
<div class="header">
<h1>Title</h1>
<div>Edit</div>
</div>
CSS:
.header *{
display: inline-block;
}
.header {
text-align: left;
}
你也可以设置宽度等。
答案 4 :(得分:0)