放置按鈕，使其不會被推下頁面

Question

請分別運行每個代碼片段，並注意按鈕在無序列表項下的位置。這些代碼片段之間的唯一區別是列表項的數量。如果有很多項目，按鈕在頁面上結束。無論有多少個列表項出現，是否有一種方法可使按鈕在「路徑內容：」標籤下顯示？

ul 
 
{ 
 
\t list-style-type: none; 
 
\t display: inline-block; 
 
\t vertical-align: top; 
 
\t padding-left: 0px; 
 
} 
 

 
button 
 
{ 
 
\t display: block; 
 
\t margin-bottom: 10px; 
 
} 
 

 
label 
 
{ 
 
\t display: inline-block; 
 
\t width: 150px; 
 
}

<div> \t \t 
 
\t \t <label id="pathcontentsLbl">path contents:</label> 
 
\t \t <span id="PathContents"> 
 
      <ul> 
 
      <li>item 1</li> 
 
      <li>item 2</li> 
 
      </ul> 
 
     </span> 
 
</div> 
 

 
\t <button id="Run">Run</button> 
 
\t <button id="Clear">Clear</button>

ul 
 
{ 
 
\t list-style-type: none; 
 
\t display: inline-block; 
 
\t vertical-align: top; 
 
\t padding-left: 0px; 
 
} 
 

 
button 
 
{ 
 
\t display: block; 
 
\t margin-bottom: 10px; 
 
} 
 

 
label 
 
{ 
 
\t display: inline-block; 
 
\t width: 150px; 
 
}

<div> \t \t 
 
\t \t <label id="pathcontentsLbl">path contents:</label> 
 
\t \t <span id="PathContents"> 
 
      <ul> 
 
      <li>item 1</li> 
 
      <li>item 2</li> 
 
      <li>item 3</li> 
 
      <li>item 4</li> 
 
      <li>item 5</li> 
 
      <li>item 6</li> 
 
      <li>item 7</li> 
 
      <li>item 8</li> 
 
      <li>item 9</li> 
 
      </ul> 
 
     </span> 
 
</div> 
 

 
\t <button id="Run">Run</button> 
 
\t <button id="Clear">Clear</button>

Answer 1

下面是我找到了這個問題的作品。技巧是使用外部容器（class =「container」）和內部容器（class =「buttons」）並在CSS中使用'position'屬性和'top'屬性。

ul 
 
{ 
 
\t list-style-type: none; 
 
\t display: inline-block; 
 
\t vertical-align: top; 
 
\t padding-left: 0px; 
 
} 
 

 
button 
 
{ 
 
\t display: block; 
 
\t margin-bottom: 10px; 
 
} 
 

 
label 
 
{ 
 
\t display: inline-block; 
 
\t width: 150px; 
 
} 
 

 
.container 
 
{ 
 
    position: relative; 
 
} 
 

 
.buttons 
 
{ 
 
    position: absolute; 
 
    top: 25px; 
 
}

<div class="container"> \t \t 
 
\t \t <label id="pathcontentsLbl">path contents:</label> 
 
\t \t <span id="PathContents"> 
 
      <ul> 
 
      <li>item 1</li> 
 
      <li>item 2</li> 
 
      <li>item 3</li> 
 
      <li>item 4</li> 
 
      <li>item 5</li> 
 
      <li>item 6</li> 
 
      <li>item 7</li> 
 
      <li>item 8</li> 
 
      <li>item 9</li> 
 
      </ul> 
 
     </span> 
 
    <div class="buttons"> 
 
    \t <button id="Run">Run</button> 
 
\t <button id="Clear">Clear</button> 
 
    </div><!--end buttons--> 
 
</div><!--end container-->

Answer 2

您可以使用CSS位置屬性設置爲固定去做。

.myclass{ 
    position: fixed; 
} 

http://www.w3schools.com/css/css_positioning.asp

希望它可以幫助你！

Answer 3

只需將按鈕移到右上角？

<div> 
    <label id="pathcontentsLbl">path contents:</label> 

    <button id="Run">Run</button> 
    <button id="Clear">Clear</button> 
    <span id="PathContents"> 
      <ul> 
      <li>item 1</li> 
      <li>item 2</li> 
      <li>item 3</li> 
      <li>item 4</li> 
      <li>item 5</li> 
      <li>item 6</li> 
      <li>item 7</li> 
      <li>item 8</li> 
      <li>item 9</li> 
      </ul> 
     </span> 
</div> 

CSS

#pathcontentsLbl{ 
    display:block 
} 

Answer 4

移動DIV中的按鈕，頂部是這樣的：

<div>  
     <label id="pathcontentsLbl">path contents:</label> 
     <div> 
      <button id="Run">Run</button> 
      <button id="Clear">Clear</button> 
     </div> 
     <div id="PathContents"> 
      <ul> 
      <li>item 1</li> 
      <li>item 2</li> 
      <li>item 3</li> 
      <li>item 4</li> 
      <li>item 5</li> 
      <li>item 6</li> 
      <li>item 7</li> 
      <li>item 8</li> 
      <li>item 9</li> 
      </ul> 
     </div> 
    </div> 

，並應用下面的CSS：

label 
{ 
    display: inline-block; 
    width: 150px; 
} 
label + div, label + div button{ 
    display: inline-block; 
} 

摘錄如下：

ul 
 
{ 
 
\t list-style-type: none; 
 
\t display: inline-block; 
 
\t vertical-align: top; 
 
\t padding-left: 0px; 
 
} 
 

 
button 
 
{ 
 
\t display: block; 
 
\t margin-bottom: 10px; 
 
} 
 

 
label 
 
{ 
 
\t display: inline-block; 
 
\t width: 150px; 
 
} 
 
label + div, label + div button{ 
 
    display: inline-block; 
 
}

<div> \t \t 
 
\t \t <label id="pathcontentsLbl">path contents:</label> 
 
     <div> 
 
\t  <button id="Run">Run</button> 
 
\t  <button id="Clear">Clear</button> 
 
     </div> 
 
\t \t <div id="PathContents"> 
 
      <ul> 
 
      <li>item 1</li> 
 
      <li>item 2</li> 
 
      <li>item 3</li> 
 
      <li>item 4</li> 
 
      <li>item 5</li> 
 
      <li>item 6</li> 
 
      <li>item 7</li> 
 
      <li>item 8</li> 
 
      <li>item 9</li> 
 
      </ul> 
 
     </div> 
 
</div>