UL/LI item item full-width

У меня есть элемент списка, который динамически создается. Как это:UL/LI item item full-width

<ul class="record-top-btns"> 
    <li><a href="#">link1</a></li> 
    <li><a href="#">link1</a></li> 
    <li><a href="#">link1</a></li> 
</ul>

Как создать полную ширину ul/li с этим. Как: enter image description here

Примечание:

Код должен работать в IE8
мы не знаем количество li элемента, потому что они создаются динамически

мой код CSS:

.record-top-btns{ 
    width:100%; 
    display:table; 
} 

.record-top-btns a{  
    padding:2px; 
    color:#5c5c5c; 
    display:block; 
    margin-top:2px; 
    margin-bottom:2px; 
    text-align:center; 
    width:100%; 
} 

.record-top-btns li{ 
    display:table-cell; /* will not work in IE8 */ 
    background:#e3ffca; 
    text-align:center; 
    background:white; 
}

вот jsFiddle

источник

2014-02-03 Radian

я сомневаюсь, что вы можете справиться с 'dynamic' вещи с' css', если старые версии IE должны быть рассмотрел .... у * есть *, чтобы выбрать jquery !!! – NoobEditor

Да, я думаю, я должен обработать это с помощью 'JS' – Radian

@Radian Для решения, не поддерживающего JS, которое работает в IE8, как насчет использования' table', и вы динамически создаете 'td' вместо' li'- [JSFiddle] (http: //jsfiddle.net/LqXH5/5/)? – Vucko

В IE8 вы можете использовать text-align-last:justify на контейнере и display:inline-block на элементах для достижения равномерного раздельную эффекта - он просто не будет работать в стабильной Chrome, так что вам нужно чтобы сделать его резервным с условными комментариями, поэтому только более старые IE используют подход text-align. По какой-то причине IE также требует, чтобы вы установили text-align при установке text-align-last - имейте это в виду.

Sample fiddle which works in IE/FF.

источник

2014-02-03 07:53:39

Я пробую ваш код, но не работаю в IE8, вот скрипка: http://jsfiddle.net/LqXH5/ 2/«пожалуйста, проверьте, что в IE8» – Radian

Обновленный ответ. –

.record-top-btns { 
    display:block; 
    width:100%; 
    background:#e3ffca; 
} 

.record-top-btns li{ 
    display:inline-block; 
    background:#e3ffca;?? you have 2 different background colours coded 
}

http://jsfiddle.net/LqXH5/7/

источник

2014-02-03 07:58:13

нет работа! здесь скрипка http://jsfiddle.net/LqXH5/4/ – Radian

http://jsfiddle.net/LqXH5/7/ –

-1

Вы можете использовать этот код, и это работает в IE

<div id="hbar"> 

     <ul class="record-top-btns"> 
     <li><a href="#">link1</a></li> 
     <li><a href="#">link1</a></li> 
     <li><a href="#">link1</a></li> 
    </ul> 

    </div>

и код CSS

#hbar{ 
    width:100% 
} 

#hbar > ul > li{  
float:left; 
} 

li{ 
width:70px; 
}

вот fiddle

источник

2014-02-03 08:19:52 abc123

Обратите внимание: 'мы не знаем количество элементов li, потому что они динамически созданы ' – Radian

.record-top-btns{ 
    display:block; 
    width:100% 
    height:25px; 
    background :#939393; 
    } 

.record-top-btns li{ 
    display:inline-block; 
    width:auto // if you want fit li in ul use width in percentage like width 33.3% when using 3 li 
}

источник

2014-02-03 08:24:49

доходя на мой комментарий, попробуйте jQuery, его много стычек

var li_count = $("ul.record-top-btns li").size();/* get number of li */ 
var wid = 100/li_count; /*find li width */ 

$("li").css('width',wid+'%'); /* set li width */

demo

источник

2014-02-03 08:42:52 NoobEditor

Спасибо, но ваш код не работает в IE. – Radian

'table-cell' поддерживается в IE8, и поэтому' jQuery' ... я предлагаю вам сначала очистить кеш, а затем проверить! – NoobEditor

UL/LI item item full-width

ответ

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