Позиционирование кнопки с помощью CSS - PullRequest
Новая
       38

Позиционирование кнопки с помощью CSS

0 голосов
/ 05 декабря 2011

У меня есть следующая стандартная разметка: 

<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 квадрата» централизованной области, независимо от ширины браузера.

Любой совет будет оценен, спасибо.

Ответы [ 3 ]

3 голосов
/ 05 декабря 2011

Один элемент для кнопки и другой элемент для линии, которая уходит в бесконечность и далее ..

Элемент бесконечности частично скрыт под фоном #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>
1 голос
/ 05 декабря 2011

Я не собираюсь говорить, что это лучший способ, но он работает для меня. 

<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 просто дает вам ссылку на центр страницы. Второе - это кнопка, где левое смещено на сколько вы хотите.

0 голосов
/ 05 декабря 2011

При создании кнопок с помощью CSS всегда рассчитывайте ширину, высоту, отступы и поля.это помогает дать точный размер коробки, чтобы соответствовать любому определенному контейнеру.проверить этот пост.http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding Также ознакомьтесь с их учебными пособиями по позиционированию.

...