html - Javascript setting width for <li> tag not working -
this question has answer here:
- css list item width/height not work 6 answers
setting width <li> tags not working. width changing based on content <li> tag below html code
without using display: block/table/inline-block;
<!doctype html> <html> <head> <style> .menu { padding: 0px; } .menu li { display: inline; } .menu li { background-color: black; color: red; padding: 10px 50px 0px 0px; border-radius: 4px 4px 0 0; } </style> </head> <body> <h2>horizontal list</h2> <ul class="menu"> <li>java script</li> <li>java script css</li> </ul> <ul class="menu"> <li style="width:80%">script</li> <li>width changed based on content </li> </ul> </body> </html>how make fixed length li tags?
here working jsfiddle of above code... above working code
try this
<!doctype html> <html> <head> <style> ul { width: 100%; } ul li { display: table-cell; width: auto; text-align: center; background-color: black; color: red; padding: 10px 50px 0px 0px; border-radius: 4px 4px 0 0; } </style> </head> <body> <h2>horizontal list</h2> <ul id="menu"> <li>java script</li> <li>java script css</li> </ul> <ul id="menu"> <li style="width:80%">script</li> <li>width changed based on content </li> </ul> </body> </html>
Comments
Post a Comment