Установить border для элемента

Рейтинг: 0Ответов: 1Опубликовано: 25.10.2014

Нужно установить бордер для элемента (в моем случае текста TEST) в его длину, а не длину родителя.

<div id="topMenu">
        <div class="firstTopMenuItem">TEST</div>
</div>

#topMenu {
     height: 80px;
     margin: 0 auto;
     background-color: #fff;
     width: 980px;
     min-width: 980px;
     border: 1px solid #f00; 
}

.firstTopMenuItem {
    width: auto;
    font-family: Tahoma;
    font-size: 15px;
    color: #000;
    border: 1px solid #000;
    margin-left: 15px;
    margin-top: 25px;
}

Скриншот: http://clip2net.com/clip/m0/a8ff2-clip-4kb.png?nocache=1

css
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Так ведь у вас и установлен бордер в длину элемента. Просто длина элемента в длину родителя: width: auto;

Обновление

Для блочного элемента - почти только статически. Можно float'ами или абсолютами, но не стоит таким злоупотреблять, пока нет понимания, как работают html и css.

Сделайте элемент строчным - и будет счастье. display: inline или display: inline-block;