Positioning a button with CSS

问题

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

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.

回答1:

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>

回答2:

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.

回答3:

When creating buttons with CSS, always calculate the width, height, paddings and margin. it helps to give accurate box size to fit any particular container. check out this post. http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding Also check out their positioning tutorials.

来源：https://stackoverflow.com/questions/8382576/positioning-a-button-with-css

标签

html

css

html5

css3

positioning