gpt4 book ai didi

html - 使用 CSS 定位按钮

转载 作者:太空宇宙 更新时间:2023-11-03 22:03:53 25 4
gpt4 key购买 nike

我有以下标准标记:

<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;
}

我遇到的困难是定位“创建内容”按钮,我希望它的定位如下所示...

enter image description here

需要注意的重点是按钮向右延伸到无限远,无论浏览器宽度如何,它总是占据中心区域“4个方格”的宽度。

如有任何建议,我们将不胜感激。

最佳答案

一个元素用于按钮,另一个元素用于延伸到无穷远处的线..

无限元素部分隐藏在 #wrap#header 元素的背景下。

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>

关于html - 使用 CSS 定位按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8382576/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com