CSS <ul> <li> проблем !


0

Имам един проблем с една задача, която трябва да свърша, той е следният:

Имам 4 бутона, изградени, със <ul> 



Трябва, ако се махне единият (примерно "Video") другите да се разпънат и да заемат цялата дължина, като са г/д еднакви по дължина.

Пробвах няколко варианта, но никакъв резултат, като махна единия бутон (едното <li>) и всички си седят на мястото:



Кода:

HTML:

 

<div class="size_m">
	<div id="t003-content" class="t003-series-single">
		<div class="t003-menu-show"></div>

<div class="t003-meta">
		<ul class="t003-meta-menu">
	   <li class="bookmark"><a href="#">Bookmark</a></li>
	   <li class="detail"><a href="#">Detail</a></li>
	   <li class="video"><a href="#">Video</a></li>
	   <li class="review"><a href="#">Review</a></li>
			</ul>

 

</div>
	</div>
		</div>


 

Единият .css 

htmlbodydivspanappletobjectiframeh1h2h3h4h5h6pblockquotepreaabbracronymaddressbigcitecodedeldfnemimginskbdqssampsmallstrike,strongsubsupttvarbuicenterdldtddolullifieldsetformlabellegendtablecaptiontbodytfoottheadtrthtdarticleasidecanvasdetailsembedfigurefigcaptionfooterheaderhgroupmenunavoutputrubysectionsummarytimemarkaudiovideo { margin0padding0border0fontinheritfont-size100%vertical-alignbaseline; }

olul { list-stylenone; }

Вторият .css
ul.t003-meta-menu { margin10px 0 0 25pxpadding0list-stylenonewidth100% !importantdisplaytable !important;  }
ul.t003-meta-menu li { margin-bottom4pxpadding-left24px; }
ul.t003-meta-menu li.bookmark { backgroundurl(../images/icons/bookmark.png) no-repeat 0px 1px; }
ul.t003-meta-menu li.detail { backgroundurl(../images/icons/detail.png) no-repeat 0px 1px; }
ul.t003-meta-menu li.video { backgroundurl(../images/icons/video.png) no-repeat 0px 1px; }
ul.t003-meta-menu a { color#eeetext-decorationnonefont-size12px; }

+
div.size_m ul.t003-meta-menu { margin0padding0list-stylenone; }
div.size_m ul.t003-meta-menu li { margin0padding28px 9px 7pxfloatleftborder-right1px solid #d3d5c9; }
div.size_m ul.t003-meta-menu li.bookmark { backgroundurl(../images/beige/bookmark.png) no-repeat 50% 7px; }
div.size_m ul.t003-meta-menu li.detail { backgroundurl(../images/beige/detail.png) no-repeat 50% 7px; }
div.size_m ul.t003-meta-menu li.video { backgroundurl(../images/beige/video.png) no-repeat 50% 7px; }
div.size_m ul.t003-meta-menu li.review { backgroundurl(../images/beige/review.png) no-repeat 50% 7px; }
div.size_m ul.t003-meta-menu li:last-child { border-right0; }
div.size_m ul.t003-meta-menu a { color#ffftext-decorationnonefont-size8pxdisplayblockwidth100%text-transformuppercasetext-aligncenter; }



Ето го live качен в моя сайт:  http://www.bpong.eu/menuproblem/series-single.html




Отговори



0
можеш ли да пейстнеш кода? pastebin например :)

от Silence95 (34 точки)


0
Ще пробвам да взема, само важните части, но не мога да постна целия, секунда

от jahmmin (766 точки)


0
Ако кажеш ID-тата и Класовете на
    и
  • може и малко по-добре да се ориентираме в кода, така е малко мазало



0
Прав си, извинявйа :Р

от jahmmin (766 точки)

0
То като гледам само класове си използвал няма нужда от ID-та ;)




0
Пробва ли с проценти?

от rnikiforova (1198 точки)


0
да, но така някои изместват други, продължавам да правя проби и вариации с %

от jahmmin (766 точки)


0
доста е трудно да се ориентираме така, ако е live страницата, дай линк за да можем да ги инспектнем :) иначе не виждам как ще се ориентираме

от stamopetkov (1429 точки)


0
няма как, тъй като всъщност не е live, аз я едитвам във виртуална среда за тестове
но ще се постарая, да измисля нещо сега

от jahmmin (766 точки)


0

Ето ти кода, който работи - http://pastebin.com/tDc4uvd9
направих фона червен да се вижда. Защо твоя не работи? Не знам, най-вероятно някъде някой ред от стиловете не си ни дал и те бърка




0
Може аз да бъркам нещо но кода не работи :( не разпъва бутоните

от stamopetkov (1429 точки)

0
Ама ти искаш и да ги разгънеш?
единия вариант е: li a { font-size:30px; } или li { width:100px; }
регулирай тия пиксели и се разгъва колкото искаш, можеш и проценти да сложиш ако искаш разбира се.




0

Мисля, че решението в защо, като задам на:
width: по-малко от 100%, 1вият бутон става всъщност по-голям ... ?

 

div.size_m ul.t003-meta-menu { margin0padding0list-stylenonewidth100%;}

 


от jahmmin (766 точки)


1
Ето това би трябвало да ти свърши работа :) трябва да използваш флекс бокс. Само, че ще трябва да почетеш малко за да го подкараш под всички браузъри :) в w3c пише, че не работи в Интернет Експлорър, но не е вярно :) аз съм го виждал. Иначе трябва да направиш нещо такова:
ul.t003-meta-menu { margin: 10px 0 0 25px; padding: 0; list-style: none; width: 230px; display: -moz-box; }
div.size_m ul.t003-meta-menu li { margin: 0; padding: 28px 9px 7px; -moz-box-flex:1.0 ;border-right: 1px solid #d3d5c9; }
Това работи само във Firefox, но можеш да го пригодиш и за другите
BTW мазал съм върху кода пастнът от колегата отгоре :)
Ето и целия код: http://pastebin.com/fshxpar8

от stamopetkov (1429 точки)


0
Да, забелязах я тази опция на display, но хрома, също не я зачиташе, значи ще го пробвам в мозила първо, мерси !

от jahmmin (766 точки)