html - How can I prevent my ul list from breaking line? [duplicate3 - still cannot find the solution] -
i trying build dynamic user interface puts model attributes category.
one of problems need put other runtime attributes on screen. want happens everytime add attribute, or new category, keeps appending on display list horizontally , shows horizontal scroll bar.
every time add attribute, layout not want, , gets "fuzzy".
i did research on stackoverflow , got topic, wanted.
so, decided apply it, no success. ideas doing wrong?
first, html.
<fieldset class="gpp21kjdhk" style=""> <legend>victim</legend> <div class="gpp21kjdlk" style="overflow: auto; position: relative; zoom: 1;"> <div style="position: relative; zoom: 1;"> <div class="gpp21kjdmk" style="position: relative; overflow: hidden; height: 100%; width: 100%;"> <div class="horizontal"> <ul> <li> <div class="vertical"> <ul> <li> <img class="gpp21kjdpl" src="https://lh5.googleusercontent.com/-b...151332.jpg" style="height: 100px; width: auto;"> </li> <li> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">given name</div> <div class="gwt-label gpp21kjdam">xxxx</div> </div> </li> <li> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">last name</div> <div class="gwt-label gpp21kjdam">xxxxx</div> </div> </li> </ul> </div> </li> <li> <div class="horizontal"> <ul> <li> <fieldset class="gpp21kjdll"> <legend>personalvehicle</legend> <div class="gpp21kjdml"> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">personal vehicle</div> <div class="gwt-label gpp21kjdam">palio</div> </div> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">personal vehicle color</div> <div class="gwt-label gpp21kjdam">white</div> </div> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">i'm adding</div> <div class="gwt-label gpp21kjdam">lots of stuff</div> </div> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">xxx</div> <div class="gwt-label gpp21kjdam">yyyy</div> </div> </div> </fieldset> </li> <li> <fieldset class="gpp21kjdll"> <legend>medicaldata</legend> <div class="gpp21kjdml"> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">known problems</div> <div class="gwt-label gpp21kjdam">??</div> </div> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">known problems</div> <div class="gwt-label gpp21kjdam">??</div> </div> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">known problems</div> <div class="gwt-label gpp21kjdam">??</div> </div> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">kk</div> <div class="gwt-label gpp21kjdam">yyyy</div> </div> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">i'm adding</div> <div class="gwt-label gpp21kjdam">lots of stuff</div> </div> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">i'm adding</div> <div class="gwt-label gpp21kjdam">lots of stuff</div> </div> </div> </fieldset> </li> <li> <fieldset class="gpp21kjdll"> <legend>physicalprofile</legend> <div class="gpp21kjdml"> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">i'm adding</div> <div class="gwt-label gpp21kjdam">lots of stuff</div> </div> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">i'm adding</div> <div class="gwt-label gpp21kjdam">lots of stuff</div> </div> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">i'm adding</div> <div class="gwt-label gpp21kjdam">lots of stuff</div> </div> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">i'm adding</div> <div class="gwt-label gpp21kjdam">lots of stuff</div> </div> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">i'm adding</div> <div class="gwt-label gpp21kjdam">lots of stuff</div> </div> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">eye color</div> <div class="gwt-label gpp21kjdam">marrom</div> </div> <div class="gpp21kjdol"> <div class="gwt-label gpp21kjdnl">age</div> <div class="gwt-label gpp21kjdam">23</div> </div> </div> </fieldset> </li> </ul> </div> </li> </ul> </div> </div> </div> </div> </fieldset> then, tried following css (both without success)...
.gpp21kjdol { padding-bottom: 10px; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } .gpp21kjdll { border-style: none; background-color: red; } .vertical {vertical-align:top; margin:0px; padding:0px; width:100%;} .vertical > ul {list-style:none; margin:0px; padding:0px; width:100%;} .vertical > ul > li {display:block; text-decoration:none; margin:0px; padding:0px 0px; overflow:hidden;} .horizontal {padding:0px; margin:0px; width:100%; height:inherit;} .horizontal > ul {float:left; list-style:none; padding:0px; margin:0px; width:100%;} .horizontal > ul > li {float:left; display:block; text-decoration:none; margin:0px; padding:0px;} and
.horizontal {padding:0px; margin:0px; width:100%; height:inherit;} .horizontal > ul { width: 100%; list-style-type: none; margin: auto; overflow-x: scroll; white-space: nowrap;} .horizontal > ul > li {float:left; display: inline-block;; text-decoration:none; margin:0px; padding:0px;} thank help!
try this:
horizontal {padding:0px; margin:0px; width:100%; height:inherit;} .horizontal > ul { width: 100%; list-style-type: none; margin: auto; overflow-x: scroll; white-space: nowrap;} .horizontal > ul > li {float:left; display:block;; text-decoration:none; margin:0px; padding:0px;}
Comments
Post a Comment