Дайте родителю ту же ширину, что и ребенку

Question

Дайте родителю ту же ширину, что и ребенку

0

(Примечание. По соображениям совместимости для этого я могу использовать только HTML и CSS).

У меня есть div содержащий тег h4. То, что заканчивается, - это мой h4 тег с автоматической заданной шириной, основанной на том, сколько текста включено. Однако, когда я включаю его под div теге div автоматически использует width:100% вместо окружающего тега, как я хочу его. Это становится проблемой, потому что, когда я меняю цвет div помощью hover я вижу тонну лишнего незаполненного пространства.

Вот один из примеров проблемы, которую я испытываю:

<a href='./HH.html'>
<div id='homenav'>
    <h4>
        HH
    </h4>
</div>
</a>

Это мой текущий CSS:

h4{padding:0px;Margin:5px;}
#homenav
{
   font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
   background: #e8edff;
   color: #669;
   text-align:center;
   vertical-align: middle;
   display:-webkit-box;
   -webkit-box-pack:left;
   -webkit-box-align:left;
   display:-moz-box;
   -moz-box-pack:left;
   -moz-box-align:left;
   border-radius: 5px;
   padding: 2px;
   width:auto;  
}

#homenav:hover
{
   background:#D0DAFD;
   color:#333399;
}

Tyler 03 дек. 2013, в 19:54

Источник

Теги:

html

css

3 ответа

1

Вы можете использовать display: table. См. Ваш пример: http://jsfiddle.net/cArg7/1/

h4{padding:0px;Margin:5px;}
#homenav
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
background: #e8edff;
color: #669;
text-align:center;
vertical-align: middle;
border-radius: 5px;
padding: 2px;
width:auto; 
display: table;
}

#homenav:hover
{
background:#D0DAFD;
color:#333399;
}

И упростите html-код, <a> теги <a> и <div>:

<a href='./HH.html' id='homenav'>
    <h4>
        HH
    </h4>
</a>

TMS 03 дек. 2013, в 17:02

0

Хорошо, теперь еще одна проблема, которая возникла, состоит в том, что ссылка все еще активна в этом пространстве, размер div исправлен, но теперь, если я нажму, где это пространство было, прежде чем ссылка все еще там активна.
Tyler 03 дек. 2013, в 19:05
1

@Tyler, хорошо, затем упростите HTML-код и объедините теги <a> и <div> . jsfiddle.net/cArg7/1
TMS 03 дек. 2013, в 19:15

0

Установка display родительского div на inline-block приведет к тому, что родительский div будет разделен на ширину текста. См. Это в качестве примера.

Csarsam 03 дек. 2013, в 16:50

Ещё вопросы

Хорошо, теперь еще одна проблема, которая возникла, состоит в том, что ссылка все еще активна в этом пространстве, размер div исправлен, но теперь, если я нажму, где это пространство было, прежде чем ссылка все еще там активна.
@Tyler, хорошо, затем упростите HTML-код и объедините теги <a> и <div> . jsfiddle.net/cArg7/1

Stefan Moraru · Accepted Answer · 2013-12-03T17-06-00.000Z

Вы можете добавить отображение: inline-block в родительский div и удалить атрибут width.

Пример:

HTML:
<div class="container">
    <h2>Text</h2>
</div>

CSS:
.container {
    display: inline-block;
}

Демо: http://jsfiddle.net/5qPH9/