Ввод кнопки в делителе в CSS

-1

Я хочу реализовать эту идею CSS: enter image description here Ввод кнопки в делителе в CSS

Каков наилучший подход, чтобы сделать это в CSS? Большое спасибо!

UPDATE

Я сделал этот трюк, прежде чем с заголовками, подробная информация здесь: Putting Heading within 2 horizontal lines in CSS

Но когда я попытался изменить версию заголовка также не работает с кнопками.

источник

2013-07-22 Khalid Khalil

К сожалению не отправлял, что я буду обновлять теперь –

Извините, но все еще очень неясно, что вы после? Вам просто нужно выровнять по правому краю 'check more' с закругленными границами? – Basic

Вы не можете видеть серый разделитель? –

http://jsfiddle.net/pB9MY/

тела {фон: #fff; }

h3 { 
    width: 500px; 
    font: 30px Arial; 
    font-weight: normal; 
    text-align: right; 
    position: relative; 
} 

h3 span { 
    background: #fff; 
    margin-right: 15%; 
    padding: 0 20px; 
} 

h3:before { 
    content: ""; 
    width: 100%; 
    left: 0; 
    top: 50%; 
    position: absolute; 
    z-index: -1; 
    height: 0; 
    border-top: 8px solid grey; 
    opacity:.2 
} 
button{ 
    background-color:green; 
    border:1px solid green; 
    border-radius:5px; 
    vertical-align:center; 
} 



<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <h3><span><button>Hello</button></span></h3> 
</body> 
</html>

источник

2013-07-22 21:35:30 bluetoft

Хорошо, что вам приятно _explain_ ваш ответ – Bojangles

И почему диапазон? должно быть возможно без ... – Pevara

Я проверю его сейчас Заранее спасибо :) –

Это вы после?

Создать DIV для текста ...

<div class="rightrounded">Some Text</div>

и применить соответствующий CSS ...

.rightrounded { 
    width: 100px; 
    float: right; 
    border-radius: 5px; 
    background-color: #008000; 
    color: #fff; 
    text-align: center; 
}

Fiddle here

источник

2013-07-22 21:37:36 Basic

Сейчас я буду тестировать :) Спасибо! –

Нет человека, сфокусируйтесь на изображении, есть горизонтальный серый разделитель –

Ввод кнопки в делителе в CSS

ответ

Смежные вопросы