Какой элемент препятствует применению моего атрибута ширины к моим вкладкам? - PullRequest
0 голосов
/ 31 января 2012

Я совершенно новичок в HTML, CSS и Javascript, но, опираясь на предыдущие знания о типичном программировании на Java и C, а также на многочисленные учебные пособия и поиски в Google, я составил очень грубое представление о том, как все это работает.

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

Вот html для вкладок:

<div id="feature-tabs">
    <ul id="tabs">
        <li><a href="#What We Do">What We Do</a></li>
        <li><a href="#What Makes Us Different">What Makes Us Different</a></li>
        <li><a href="#Our Background">Our Background</a></li>
        <li><a href="#Why We Do It">Why We Do It</a></li>
    </ul>
</div>`

А вот соответствующий CSS, который его стилизует.

#feature-tabs {
    height: 16px;
    width: 150px;
}

ul#tabs {
     list-style-type: none; 
     margin: 0 0 2 0; 
}
    ul#tabs li {
        float: left;
    }
        ul#tabs li a {
            color: #42454a; 
            background-color: #dedbde; 
            border: 1px solid #c9c3ba; 
            border-bottom: none; 
            text-decoration: none;
            width: 150px;
        }
            ul#tabs li a:hover {
                background-color: #f1f0ee;
            }
            ul#tabs li a.selected {
                color: #000; 
                background-color: #f1f0ee; 
                font-weight: bold;
            }

Мне это очень нужно, так как внешний вид, к которому я стремлюсь, ноЯ просто не могу понять, почему, куда бы я ни положил width: ___px;, это просто не будет применяться.

Мне интересно, есть ли что-то, что я делаю, что мешает ширине быть применимой чертой, или что у вас есть.

Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 31 января 2012

Попробуйте добавить этот стиль:

ul#tabs li a {
    // ..
    display: block;
}

Это происходит потому, что a являетсявстроенный элемент по умолчанию.Встроенные элементы не реагируют на высоту / ширину.

1 голос
/ 31 января 2012

Добавьте следующее правило к вашей ссылке:

ul#tabs li a { display: inline-block; }
...