Как установить фиксированную ширину для внутреннего элемента div при использовании свойств отображения

Я ищу недвижимость, которая

  1. Центрирует внутренний элемент div по горизонтали

  2. Устанавливает ширину этого внутреннего элемента div на фиксированную ширину 40 пикселей.

Я попытался следовать, чтобы увидеть, работает ли это. Я использовал display:table и display:table-cell, потому что в нем будет больше ячеек и строк таблицы. Это просто пример нерабочего случая.

Когда я использую display:table с шириной 100%, я могу центрировать внутренний элемент div. Это будет решением для (1).

Моя проблема в пункте (2). Я хочу иметь ячейку таблицы шириной 40 пикселей. На данный момент внутренний div расширяется до 100% ширины внешнего div. Вы можете понять, что я имею в виду, взглянув на эту скрипку. Граница вокруг числа должна быть шириной всего 40 пикселей.

У вас есть идея, как ее решить?

<div style="display:table;width:100%;height:47px;border:1px solid blue;text- align:center;">  
         <div style="display:table-cell;width:40px;height:47px;border:1px solid red"> 1</div> 
</div>

html css css-tables
person qlib    schedule 20.01.2011    source источник
comment
Если вы отображаете табличные данные, таблица вполне допустима. Не бойтесь их использовать, просто не используйте их для макета :)   -  person Kyle    schedule 20.01.2011
comment
Мне нужно для макета. и я боюсь, что нет другого способа стилизовать его.   -  person qlib    schedule 20.01.2011

Ответы (3)


arrow_upward
2
arrow_downward

Почему нет:

div.inner {
 margin: 0 auto;
 width: 40px;
}
person Summer    schedule 20.01.2011
comment
к сожалению без разницы. И мне нужно свойство display:table-cell - person qlib; 20.01.2011

arrow_upward
1
arrow_downward

Вы можете использовать это в HTML:

<div class="wrapper">  
         <div class="inner"> 1</div> 
</div>

и CSS:

.wrapper
{
   width:100%;
   height:47px;
   border:1px solid blue;
   text-align:center;
}

.inner
{  
   margin: 0 auto;
   width:40px;
   height:47px;
   border:1px solid red;
}
person Kyle    schedule 20.01.2011
comment
Проблема в том, что это будет таблица с большим количеством ячеек таблицы. - person qlib; 20.01.2011
comment
Хорошо, мы можем увидеть более развернутый пример? Может где-то проблемы :) - person Kyle; 20.01.2011

arrow_upward
1
arrow_downward

Если вы настроите его вести себя как таблица, он будет вести себя как таблица, и если есть только один столбец, он будет иметь ширину таблицы.

Таким образом, вы можете либо добавить больше ячеек, чтобы заполнить всю таблицу, либо избавиться от макета таблицы и использовать решение @Summer.

person jeroen    schedule 20.01.2011
comment
так что нет возможности установить ширину одной ячейки таблицы? - person qlib; 20.01.2011
comment
@qlib есть, но только когда столбцов больше, а остальные занимают оставшееся место. - person jeroen; 20.01.2011