html - css overflow-x: scroll on ul -

-

i'm trying create table using ul li, despite try way can x overflow scroll when manually set width, not practical don't know how many rows in table.

question 1: how achive 'overflow-x:' scroll on this?

question 2: should using 'a href' or 'onclick' around ul ?

#results {    background-color: #f3f3f3;    border: 1px dotted #4b545f;    position: absolute;    left: 9px;    top: 114px;    height: -moz-calc(100% - 230px);    height: -webkit-calc(100% - 230px);    height: -o-calc(100% - 230px);    height: calc(100% - 230px);    width: -moz-calc(100% - 20px);    width: -webkit-calc(100% - 20px);    width: -o-calc(100% - 20px);    width: calc(100% - 20px);    overflow-x: scroll;    overflow-y: hidden;  }  #header {    position: absolute;    left: 0px;    top: 0px;    height: 40px;    overflow-x: visible !important;    white-space: nowrap;    display: inline-block;    width: 100%;  }  #header > ul {    width: auto;    height: 40px;    line-height: 40px;    color: #fff;    border: 1px dotted #4b545f;    padding: 0 0px;    list-style: none;    margin: 0px;    overflow-x: visible !important;    overflow-y: hidden !important;    clip-parent: #resbody !important;  }  #header > ul > li {    float: left;    padding: 0 10px;    width: 114px;    max-width: 114px;  }  #resbody {    position: absolute;    left: 0px;    top: 40px;    height: -moz-calc(100% - 40px);    height: -webkit-calc(100% - 40px);    height: -o-calc(100% - 40px);    height: calc(100% - 40px);    overflow-y: scroll;    overflow-x: visible;  }  #resbody > ul {    display: inline-block;    color: #fff;    height: 25px;    line-height: 25px;    border-left: 1px dotted #4b545f;    border-right: 1px dotted #4b545f;    border-bottom: 1px dotted #4b545f;    padding: 0 0px;    list-style: none;    padding: 0 0px;    margin: 0px;    width: auto;    white-space: nowrap;    overflow-x: visible !important;    overflow-y: hidden;  }  #resbody > ul > > li {    display: inline-block;    list-style: none;    float: left;    padding: 0 10px;    width: 114px;    max-width: 114px;    color: #000;    position: relative;  }  #resbody > ul:hover > > li {    float: left;    padding: 0 10px;    width: 114px;    max-width: 114px;    color: #000;    background-color: #0b75b2;  }
<div id="results">    <div id="header">      <ul>        <li><a href="#">aa</a>        </li>        <li><a href="#">bb</a>        </li>        <li><a href="#">cc</a>        </li>        <li><a href="#">dd</a>        </li>        <li><a href="#">ee</a>        </li>        <li><a href="#">ff</a>        </li>        <li><a href="#">gg</a>        </li>        <li><a href="#">hh</a>        </li>        <li><a href="#">ii</a>        </li>        <li><a href="#">jj</a>        </li>        <li><a href="#">kk</a>        </li>        <li><a href="#">ll</a>        </li>        <li><a href="#">mm</a>        </li>        <li><a href="#">nn</a>        </li>      </ul>    </div>    <div id="resbody">      <ul>        <a href="#a#">          <li><a href="#">aa</a>          </li>          <li><a href="#">bb</a>          </li>          <li><a href="#">cc</a>          </li>          <li><a href="#">dd</a>          </li>          <li><a href="#">ee</a>          </li>          <li><a href="#">ff</a>          </li>          <li><a href="#">gg</a>          </li>          <li><a href="#">hh</a>          </li>          <li><a href="#">ii</a>          </li>          <li><a href="#">jj</a>          </li>          <li><a href="#">kk</a>          </li>          <li><a href="#">ll</a>          </li>          <li><a href="#">mm</a>          </li>          <li><a href="#">nn</a>          </li>        </a>      </ul>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

-
i'm trying plot frequency characteristic equation using ezplot, matlab gives following warning, "contour not rendered non-finite zdata". have used command plot frequency equations warning , plot display empty , not change axis range well. can please help. appreciated. here's code i'm using. % transfer matrix case-i, thin rotor clear all; clc; ei = 1626; l = 0.15; m = 0.44108; = 2.178*10^-4; i_p = 2.205*10^-5; itr = 0.24; i_pr = 0.479; syms p n; f = [1 l*1i l^2/(2*ei)*1i l^3/(6*ei); 0 1 l/ei -l^2/(2*ei)*1i; 0 0 1 -l*1i; 0 0 0 l]; p = [ 1 0 0 0; 0 1 0 0; 0 -it*p^2+i_p*n*p 1 0; -m*p^2 0 0 1]; p_r = [1 0 0 0; 0 1 0 0; 0 -itr*p^2+i_pr*n*p 1 0; -m*p^2 0 0 1]; = f*p*f*p*f*p*f; b = p_r*f*p*f*p*f; r = a(1,2)/a(1,4); a12_p = 0; a22_p = a(2,2)-r*a(2,4); a32_p = a(3,2)-r*a(3,4); a42_p = a(4,2)-r*a(4,4); ap(2,2) = a22_p; ap(3,2) = a32_p; ap(4,2) = a42_p; ap(4,4) = 1; c = b*ap; m = [c(3,2) c(3,4); c(4,2) c(4,...
Read more

delphi - Indy UDP Read Contents of Adata -

-
i using indy udp server read string of data. however, not know how work adata parameter. can around converting binary using bytetobin function below , convert hex using bintohex1 . feel stupid , works slow. know how can directly results without 2 conversions? thanks!! here codes: procedure tform1.idudpserver1udpread(athread: tidudplistenerthread; const adata: tidbytes; abinding: tidsockethandle); var buf: tidbytes; buffer: string; data_received: string; begin if bytestostring(adata) <> 'hello' begin buffer := hextostring('00'); setlength(buf, length(buffer)); copytidstring(buffer, buf, 0); abinding.sendto(abinding.peerip, abinding.peerport, buf); data_received := bintohex1(bytetobin(adata[1]) + bytetobin(adata[2]) + bytetobin(adata[3]) + bytetobin(adata[4]) + bytetobin(adata[5]) + bytetobin(adata[6]) + bytetobin(adata[7]) + bytetobin(adata[8]) + bytetobin(adata[9]) + bytetobin(adata[10]) + bytetobin(adata[11...
Read more

qt - How to embed QML toolbar and menubar into QMainWindow -

-
i using qwt library plot data. seems not possible embed qwidget qml quick 2 . so, decided create qmainwindow main window , create toolbar , menubar using quick controls . how should embed qml toolbar , menubar qmainwindow ? you should create qml applicationwindow qml menubar , toolbar main.qml applicationwindow { visible: false menubar: menubar { menu { title: "edit" menuitem { text: "cut" } } } toolbar: toolbar { row { anchors.fill: parent toolbutton { iconsource: "1.png" } } } } main.cpp qapplication app(argc, argv); qqmlapplicationengine engine; engine.load(qurl(qstringliteral("qrc:///main.qml"))); then pointer applicationwindow qwindow *qmlwindow = qobject_cast<qwindow*>(engine.rootobjects().at(0)); create window container, using qwidget::createwindowco...
Read more