按钮的放置使它们不会被推到页面上

Question

请分别运行每个代码段，并注意按钮如何在无序的项目列表下方按下。这些代码段之间的唯一区别是列表项的数量。如果有很多项目，按钮最终会在页面上向下。有没有办法让按钮显示在＆＃34;路径内容下：＆＃34;标签，无论出现多少列表项？

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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

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

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

＆＃13;

<div>		
		<label id="pathcontentsLbl">path contents:</label>
		<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>

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用css position属性设置为fixed来修复它。

.myclass{
   position: fixed;
}

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

希望对你有所帮助！

Answer 2

只需将按钮移到右上角？

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

以下是我发现的解决此问题的方法。诀窍是使用外部容器（class =＆＃34;容器＆＃34;）和内部容器（class =＆＃34;按钮＆＃34;）并使用＆＃39;位置＆＃39;财产以及＆＃39; top＆＃39; CSS中的属性。

＆＃13;

＆＃13;

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

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

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

.container
{
  position: relative;
}

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

＆＃13;

<div class="container">		
		<label id="pathcontentsLbl">path contents:</label>
		<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">
  	  <button id="Run">Run</button>
	  <button id="Clear">Clear</button>
  </div><!--end buttons-->
</div><!--end container-->

＆＃13;

＆＃13;

＆＃13;