2015-11-18 3 views
0

У меня есть div и мне нужно 6 пролетов там с фиксированной шириной (теперь есть текст) - когда я удаляю текст, ширина равна 0px. Что я могу сделать? Я попробовал купол с display: block;, но он перемещал пролеты под ними.Ширина фиксированной ширины в div

Вот JSFiddle demo.

#load-1 { 
 
    border-bottom: 3px pink solid; 
 
    width: 10px; 
 
    height: 10px; 
 
} 
 
#load-2 { 
 
    border-bottom: 3px grey solid; 
 
} 
 
#load-3 { 
 
    border-bottom: 3px grey solid; 
 
} 
 
#load-4 { 
 
    border-bottom: 3px grey solid; 
 
} 
 
#load-5 { 
 
    border-bottom: 3px grey solid; 
 
} 
 
#load-6 { 
 
    border-bottom: 3px grey solid; 
 
}
<div class="load"> 
 
    <span class="loading" id="load-1">hello</span> 
 
    <span class="loading" id="load-2">hello</span> 
 
    <span class="loading" id="load-3">hello</span> 
 
    <span class="loading" id="load-4">hello</span> 
 
    <span class="loading" id="load-5">hello</span> 
 
    <span class="loading" id="load-6">hello</span> 
 
</div>

+0

Try дисплей: встроенный блок; и удалить высоту или установить не 10px; – EekTheCat

+0

Поскольку вам нужна только ширина исправления, почему бы не использовать «display: inline-block» –

ответ

1

Я не знаю, правильно ли я понял, но я понимаю, что должен быть хотя бы подчеркнутый блок, даже если он не содержит текста. Что вам нужно сделать, это сделать div из span, потому что вы не можете применять ширину к тегам span. Затем вы должны дать div a height и min-width в css. С помощью min-width вы убедитесь, что даже если div пуст, он имеет по крайней мере эту минимальную ширину.

Посмотрите на мою скрипку здесь: http://jsfiddle.net/e8t64vtk/2/

+0

Я не знаю, если это хорошее разрешение, но оно работает :) –

+0

Я признаю, что код может быть более сжатым, но я думаю, что вы тоже можете это сделать :) Если это решение сработало для вас, пожалуйста, не забудьте нажать клавишу со стрелкой вверх и принять ее как правильный ответ :) –

0

Использование display:inline-block. Это будет работать.

+0

'.load> span {inline-block; } 'Устанавливает все элементы правильно – AlexG

Смежные вопросы