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

Question

我有unordered list(<ul>)我有一些元素。现在，在我的顶部列表中，我有select all和Go按钮。我希望Select all和Go按钮固定在滚动条的独立位置。我尝试将position:fixed提供给li的{​​{1}}}，但是当值增加Select All的位置时会发生扭曲。请指导。

Select All

.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;     
}

Answer 1

在上方<ul>标记

中移动全选输入字段

＆＃13;

＆＃13;

.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;     
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在全选WebView myWebView = (WebView) findViewById(R.id.webview); myWebView.loadUrl("http://www.example.com"); 之后添加另一个ul，并为其及其父li修改内联样式。

＆＃13;

＆＃13;

ul

＆＃13;

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;     
}

＆＃13;

＆＃13;

＆＃13;

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>