ボタンがページ上にプッシュダウンされないようにボタンの配置

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の 'top'プロパティと共に 'position'プロパティを使用していました。

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のpositionプロパティのセットを使用することができます。

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