Границы частичной ширины

#html #css #border

#HTML #css #граница

Вопрос:

Как я могу создать границы, которые не растягиваются на всю ширину данного поля? Например.:

введите описание изображения здесь

Должен ли я использовать отдельный HTML-элемент с другой шириной? Или я могу добиться этого полностью с помощью CSS.

1. Я думаю, что эти конкретные элементы — это <hr /> s с их width набором.

2. Правильно, мой вопрос заключается в том, могу ли я достичь этого эффекта без добавления каких-либо дополнительных HTML-элементов ( <hr> ов или иным образом)

3. каковы требования / цели вашего браузера?

4. это становится помеченным из-за содержимого изображения. Не могли бы вы, пожалуйста, заменить что-нибудь без нежелательных формулировок?

5. Готово (хотя у меня такое чувство, что я только что нацарапал на лице Моны Лизы!)

Ответ №1:

Вы всегда можете использовать оператор CSS:after:

 <style>
div.hr-like:after {
    height:1px;
    background:#333;
    width:25%;
    display:block;
    margin:0px auto;
    content:""
}
</style>

<div class="hr-like">
    foo
</div>

Добавлено: Вот пример в jsfiddle

Ответ №2:

Вы могли бы назначить фоновое изображение каждому частичному элементу и разместить его внизу посередине. Тогда разделителем может быть то, что вы хотите, и какой длины вы хотите, например, эта линия карандаша, которую вы получили там.

 #content {
    background: transparent url('http://placekitten.com/200/10') no-repeat bottom center;
}

Извините за котят…