使用 CSS 定位按钮

发布于 2024-12-19 13:17:33 字数 659 浏览 0 评论 0原文

我有以下标准标记：

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

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

在此处输入图像描述

需要注意的要点是，按钮向右延伸至无穷大，并且无论怎样，它始终占据中心区域“4 个正方形”的宽度浏览器宽度是多少。

任何建议将不胜感激，谢谢。

原文

I have the following standard markup:

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

and style:

.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...

enter image description here

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

§对你不离不弃 2024-12-26 13:17:33

一个元素用于按钮，另一个元素用于无限远及无限远的线条。

无限元素部分隐藏在 #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>

One element for the button and another element for the line that goes into the infinity and beyond..

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>

回复收藏 0 原文

庆幸我还是我 2024-12-26 13:17:33

我不会说这是最好的方法，但它对我有用。

<div style = "background:red;position:relative;left:50%;right:0">
<div style = "background:green;position:relative;left:120px;right:0">
 Your button here!
</div>
</div>

第一个 div 只是为您提供了对页面中心的引用。第二个是“按钮”，左侧可按您想要的偏移量进行偏移。

I'm not going to say this is the best way, but it works for me.

<div style = "background:red;position:relative;left:50%;right:0">
<div style = "background:green;position:relative;left:120px;right:0">
 Your button here!
</div>
</div>

The first div just gives you a reference to the centre of the page. The second is the 'button' where the left is offset by however much you want.

回复收藏 0 原文

扮仙女 2024-12-26 13:17:33

使用 CSS 创建按钮时，请务必计算宽度、高度、填充和边距。它有助于提供准确的盒子尺寸以适合任何特定的容器。看看这篇文章。 http://www.phcityonweb.com/tutorial/css-programming-lessons /margin-padding 另请查看他们的定位教程。

回复收藏 0 原文

~没有更多了~