Создание дочернего элемента такой же ширины и границы, как у родителя

Question

Создание дочернего элемента такой же ширины и границы, как у родителя

0

Например, у меня есть тег "li", который внутри него есть тег "a". Я хочу, чтобы весь ряд имел border-bottom: 1px solid #ccc;

<li class=sub">
     <a href="3" class="active">
         <span id="1">Text</span>
     </a>
</li>

В настоящее время у меня есть

span {
    width: 90%;
    border-bottom: 1px solid #ccc;
    font-size:12px;
}

li {
    width: 100%;
}

Но кажется, что только текст будет подчеркнут, я бы хотел, чтобы вся "ли", которая воспринималась как целая строка, была подчеркнута. Но не подчеркивая "li", но тег "span". Таким образом, в основном хотелось бы, чтобы мой тег "span" был такой же ширины, что и родительский "li", не уверен, чего я не вижу в моем CSS.

Hard Fitness 18 фев. 2014, в 00:01

Источник

1

Span является встроенным элементом. Если вы хотите установить ширину для диапазона, вы можете добавить display:inline-block для вашего диапазона в вашем CSS.
morgul 17 фев. 2014, в 23:02
2

{display: block; border-bottom: 1px solid #ccc;}, никакой промежуток не нужен, я думаю :)
G-Cyr 17 фев. 2014, в 23:04

Теги:

javascript

html

list

css

1 ответ

Ещё вопросы

Span является встроенным элементом. Если вы хотите установить ширину для диапазона, вы можете добавить display:inline-block для вашего диапазона в вашем CSS.
{display: block; border-bottom: 1px solid #ccc;}, никакой промежуток не нужен, я думаю :)

balexandre · Accepted Answer · 2014-02-17T20-12-00.000Z

Вы должны понимать, что span является встроенным элементом, и для таких не существует такой вещи, как width, чтобы сделать span наследует ширину, вы должны убедиться, что вы устанавливаете display к block - элементу, в вашем случае, попробуйте inline-block.

живой пример: http://jsbin.com/liwah/1/edit?html,css,output

удачи всем! Это часть чего-то большего, но помогает понять, что я делал не так. Спасибо