Расстянуть по высоте <li></li> с большим текстом

[mstdmstd]

Всем привет
Подскажите, пожалуйста, как сделать чтобы в табличной верстке сделаной с помошью элементов списка <ul><li>...
если внутри <li></li> большой текст, этот текст не налезал на нижнюю ячейку, а расстягивал по высоте элемент<li> с большим текстом и элементы <li> на одной строке.

 

[Лёха]

Показывай пример

 

[mstdmstd]

Вот кусочек кода

 <div class="bigTableBox">
    <div class="bigTableHeader">
      <div class="bigTableHeaderL">
        Name
      </div>
      <div>
        Status
      </div>
    <div>
      Position
    </div>
    <div>
      School
    </div>
    <div>
      Graduation Year
    </div>
    <div>
      Ranking
    </div>
    <div>
      Updated at
    </div>
   
    <div class="bigTableHeaderR"></div>
      <p class="clr"></p>
    </div>
    <div class="bigTableConBox">
    <div class="bigTableConTop"></div>
    <ul >
        <li class="bigTableConL">
          Arik Armstead               
        </li>
        <li>Verbal Commitment</li>
        <li>Offensive Tackle</li>
        <li>Pleasant Grove HS</li>
        <li>2012</li>
        <li>5</li>
        <li>2011-06-17 15:33</li>
        <li></li>
    </ul>
  
    <ul >
        <li class="bigTableConL">
          Jaquay Williams
        </li>
        <li>No Commitment</li>
        <li>Wide Receiver</li>
        <li>Sandy Creek HS</li>
        <li>2012</li>
        <li>4</li>
        <li>2011-06-17 15:08</li>
        <li></li>
    </ul>                                                                                                   
    <div class="bigTableConBtm"></div>
  </div>
  </div>

Класс bigTableBox не определен
SS:

.bigTableHeader {
width: 1115px;
margin-bottom: 10px
}

.bigTableHeader div.bigTableHeaderL {
width: 170px;
background: url(../images/bt-headerr-bg.png) 0 0 no-repeat transparent
}

.bigTableHeader2 div.bigTableHeaderL {
background: url(../images/bt-headerr-bg.png) 0 0 no-repeat transparent
}

.bigTableHeader div.bigTableHeaderR {
background: url(../images/bt-headerl-bg.png) 0 0 no-repeat transparent
}

.bigTableHeader2 div.bigTableHeaderR {
background: url(../images/bt-headerl-bg.png) 100% 0 no-repeat transparent
}

.bigTableConBox ul, .bigTableConBox2 ul {
list-style: none;
margin: 0;
padding: 0;
height: 36px;
background: url(../images/bt-con-cen.png) 0 0 repeat-y transparent;
clear: left
}

.bigTableConBox ul.admin_row_odd, .bigTableConBox2 ul.admin_row_odd {
background: url(../images/bt-con-cenh.png) 0 0 repeat-y transparent
}

.bigTableConBox ul li {
float: left;
height: 36px;
font-size: 14px;
/* font-weight: bold; */
color: #000;
width: 135px;
text-align: center;
line-height: 242%
}


.bigTableConBox ul li a, .bigTableConBox2 ul li a {
color: #000;
text-decoration: none
}

.bigTableConBox ul li a:hover, .bigTableConBox2 ul li a:hover {
text-decoration: none
}

.bigTableConBox ul .bigTableConL {
width: 170px;
text-align: left;
text-indent: 10px
}


.bigTableConTop, .bigTableConBtm {
width: 1115px;
height: 5px;
overflow: hidden;
font-size: 1px;
background: url(../images/bt-con-top.png) 0 0 no-repeat transparent;
}

.bigTableConBox ul .bigTableConL {
width: 170px;
text-align: left;
text-indent: 10px
}
Увеличивать например у класса bigTableConL параметр width не лучший способ - так как там несколько полей в одну строку
Хотелось бы чтобы расстягивался по высоте элемент<li> с большим текстом и все элементы <li> на одной строке.

 

[Лёха]

у .bigTableConBox ul li { замени height: 36px на min-height: 36px;
и добавь свойство: display: inline-table;

 

[mstdmstd]

Переделал определение, но не помогло:

.bigTableConBox ul li {
float: left;
min-height: 36px;
display: inline-table;
font-size: 14px;
/* font-weight: bold; */
color: #000;
width: 135px;
text-align: center;
line-height: 242%
}

display: inline-table также относится к этому классу?
также я пытался коментарить width и line-height, но не помогло.
Посмотрите пожалуйста вживую. надо зайти сюда http://recruitwars.com/web/login и войти как [email protected] 111111

Перейти на http://recruitwars.com/web/predict_listview
И там видно как более широкие поля налезают на нижние

 

[Bardak]

Вся проблема в указании точного значения высоты у списка (ul).

Если убрать указание высоты у списка, его высота будет равно 0, т.к.
элементы списка (li) имеют параметр float: left; а значит выпадают из
контекста вывода.

Для предотвращения этого вы можете, например, ввести вспомогательный
элемент списка в конце каждого списка li.last {width: 100%; height: 1px; clear: both; overflow: hidden;},
для того чтобы высота списка определялась по высоте его элементов.

А вообще говоря, мне совершенно непонятно зачем для оформления таблицы использовать списки,
а не таблицы?..

 

[mstdmstd]

спасибо за помощь