Question

我有以下标准标记：

<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个方块”的宽度。

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

Answer 1

按钮的一个元素和进入无限远的线的另一个元素..

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

Answer 2

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

<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只是为您提供页面中心的引用。第二个是“按钮”，左边偏移了你想要的多少。

Answer 3

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

使用CSS定位按钮

3 个答案: