使用CSS定位按钮 [英] Positioning a button with CSS
问题描述
我有以下标准标记：
<body>
<header><div class="wrapper">Header</div></header>
<div id="create">create something</div>
<div class="wrapper">Content</div>
<footer><div class="wrapper">footer</div></footer>
</body>
和样式：
.wrapper {
width: 920px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
我遇到的困难是定位我希望它的位置如下所示...
The thing I am having difficulty with is positioning the "create something" button, I would like it positioned as shown below...
要注意的重要点是，按钮向右延伸到无穷远，并且总是占用宽度4个正方形
The important points to note are that the button extends to the right into infinity, and it always takes up a width of "4 squares" of the centralised area, no matter what the browser width.
任何建议都将不胜感激。
Any advice would be appreciated, thanks.
推荐答案
一个元素的按钮和另一个元素的线进入无穷大和超越..
One element for the button and another element for the line that goes into the infinity and beyond..
无限元素部分隐藏 #wrap 或 #header 元素的背景。
The infinity element is partially hidden under #wrap or #header element's background.
http://jsfiddle.net/lollero/62wcV/1
CSS：
#wrap {
width: 400px;
margin: 0px auto;
background: #ffffff;
position: relative;
z-index: 10;
height: 600px;
}
#button,
#button_line {
position: absolute;
top: 40px;
right: 0px;
height: 20px;
background: #3a99ff;
}
#button {
width: 100px;
}
#button_line {
left: 50%;
z-index: 5;
}
HTML：
<div id="button_line"></div>
<div id="wrap">
<div id="button"></div>
</div>
这篇关于使用CSS定位按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
