CSS-如何使第一行始終固定？

Question

我有一個unordered list(<ul>) ，其中有幾個元素。 現在，在頂部的列表中，我select all然后select all了Go按鈕。 我希望全Select all和Go按鈕固定不依賴於滾動條。 我嘗試給出position:fixed到Select All的（ li ），但是當值增加Select All Distorts的位置時。 請指導。

 .scrollClass { overflow: auto; } .scrollClass select { border: none; } .dropDown, testClass { padding-left: 0px !important; z-index: 999999999; position: absolute; } .rowClass { cursor: pointer; padding: 5px; border: 1px solid #94c0d2; list-style: none; border-bottom-style: none; } 

 <h3>Name</h3> <ul class="testClass" style=" padding-left:0px; margin-bottom:0px;"> <li> <input type="text" name="name" id="myText"> </li> </ul> <ul class="dropDown" style="max-height:200px; overflow-y:scroll; margin-top:2px;"> <li class="rowClass" style=" max-width:400px; min-width:400px; "> <label> <input type="checkbox" id="check" value="0"> Select All </label> <input type="button" value="Go" style="float:right;"> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test1 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test2 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test3 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test4 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test5 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test5 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test5 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test5 </label> </li> </ul> 

Answer 1

在<ul>標記上方移動“全選”輸入字段

 .scrollClass{ overflow: auto; } .scrollClass select{ border: none; } .dropDown, testClass{ padding-left:0px !important; z-index:999999999; position:absolute; } .rowClass{ cursor:pointer; padding:5px; border:1px solid #94c0d2; list-style:none; border-bottom-style:none; } 

 <h3> Name </h3> <ul class="testClass" style=" padding-left:0px; margin-bottom:0px;"> <li> <input type="text" autocomplete="off" name="name" id="myText"/> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" id="chkAll" value="0"/> Select All </label> <input type="button" value="Go" style="float:right;"></input> </li> </ul> <ul class="dropDown" style="max-height:200px; overflow-y:scroll; margin-top:2px;"> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"/> Test </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"/> Test1 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"/> Test2 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"/> Test3 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"/> Test4 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"/> Test5 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"/> Test6 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"/> Test7 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"/> Test8 </label> </li> </ul> 

Answer 2

您可以在“全選” li之后添加另一個ul ，並為其及其父級ul修改內聯樣式。

 ul {padding:0} .scrollClass { overflow: auto; } .scrollClass select { border: none; } .dropDown, testClass { padding-left: 0px !important; z-index: 999999999; position: absolute; } .rowClass { cursor: pointer; padding: 5px; border: 1px solid #94c0d2; list-style: none; border-bottom-style: none; } 

 <h3>Name</h3> <ul class="testClass" style="padding-left:0px; margin-bottom:0px;"> <li> <input type="text" autocomplete="off" name="name" id="myText"> </li> </ul> <ul class="dropDown" style="margin-top:2px;"> <li class="rowClass" style="width:400px"> <label> <input type="checkbox" id="chkAll" value="0"> Select All </label> <input type="button" value="Go" style="float:right;"> </li> <ul style="max-height:200px; overflow-y:scroll;"> <li class="rowClass" style="max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test </label> </li> <li class="rowClass" style="max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test1 </label> </li> <li class="rowClass" style="max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test2 </label> </li> <li class="rowClass" style="max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test3 </label> </li> <li class="rowClass" style="max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test4 </label> </li> <li class="rowClass" style="max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test5 </label> </li> <li class="rowClass" style="max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test6 </label> </li> <li class="rowClass" style="max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test7 </label> </li> <li class="rowClass" style="max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test8 </label> </li> </ul> </ul> 

Answer 3

雖然我的投票投給@Satendra，但也請嘗試一下

 .scrollClass { overflow: auto; } .scrollClass select { border: none; } .dropDown, testClass { padding-left: 0px !important; z-index: 999999999; position: absolute; } .rowClass { cursor: pointer; padding: 5px; border: 1px solid #94c0d2; list-style: none; border-bottom-style: none; } .rowClass:first-child { position: fixed; background: #ffffff; border: 1px solid #94c0d2; } 

 <h3>Name</h3> <ul class="testClass" style=" padding-left:0px; margin-bottom:0px;"> <li> <input type="text" autocomplete="off" name="name" id="myText"> </li> </ul> <ul class="dropDown" style="max-height:200px; overflow-y:scroll; margin-top:2px;"> <li class="rowClass" style=" max-width:400px; min-width:400px; "> <label> <input type="checkbox" id="chkAll" value="0"> Select All </label> <input type="button" value="Go" style="float:right;"> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test1 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test2 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test3 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test4 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test5 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test5 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test5 </label> </li> <li class="rowClass" style=" max-width:400px; min-width:400px;"> <label> <input type="checkbox" name="allClass" class="checkBoxClass"> Test5 </label> </li> </ul>