Question

我试图将两个按钮放在底部并排放置，它们都必须填满屏幕的宽度，所以我将它们的宽度设为50％这是我的HTML：

＆＃13;

#norm, #eco {
	background-color: #210511;
	color: white;
	width: 50%;
	position: absolute;
	bottom: 0;
	z-index: 999;
}
#norm {
	float: left;
}
#eco {
	float: right;
}

＆＃13;

<div id="btmBtnsContainers">
    <input type="button" name="normal" value="Normal" id="norm" />
    <input type="button" name="economy" value="Economy"  id="eco" />
</div>

＆＃13;

＆＃13; 但它只用一个按钮结束，另一个被隐藏!!

Answer 1

制作容器absolute而不是按钮。像这样：

＆＃13;

#btmBtnsContainers {
  width: 100%;
  position: absolute;
  bottom: 0;
  left:0;
  z-index: 999;
}

#norm,
#eco {
  background-color: #210511;
  color: white;
  width: 50%;
  float:left;
}

＆＃13;

<div id="btmBtnsContainers">
  <input type="button" name="normal" value="Normal" id="norm" />
  <input type="button" name="economy" value="Economy" id="eco" />
</div>

＆＃13;

Answer 2

当您绝对定位按钮时，没有任何浮动按钮的意义。相反，将左右位置分配给它们：

＆＃13;

#norm,#eco {
    background-color:#210511;
    color:white;
    width: 50%;
    position: absolute;
    bottom: 0;
    z-index: 999;
}

#norm {
    left:0;
}

#eco {
    right:0;
}

＆＃13;

 <div id="btmBtnsContainers">
        <input type="button" name="normal" value="Normal" id="norm" />
        <input type="button" name="economy" value="Economy"  id="eco" />
    </div>

＆＃13;

Answer 3

NiZa的回答是一种方式，而另一种方式：

由于您已为输入设置setShouldExecuteAsBackgroundTaskWithExpirationHandler，因此它们位于相同的位置。只需添加position:absolute即可将其放在右侧。

另外，当您将right:0更改为position时，absolute属性不再有效，因此您可以将其删除。

＆＃13;

float

＆＃13;

 #norm,#eco {
            background-color:#210511;
            color:white;
            width: 50%;
            position: absolute;
            bottom: 0;
            z-index: 999;
        }
        #eco
        {
            right:0;
        }

＆＃13;

Answer 4

使用left和right代替float。

＆＃13;

 #norm,#eco {
            background-color:#210511;
            color:white;
            width: 50%;
            position: absolute;
            bottom: 0;
            z-index: 999;
        }
        #norm
        {
            left:0;
        }
        #eco
        {
            right:0;
        }

＆＃13;

 <div id="btmBtnsContainers">
        <input type="button" name="normal" value="Normal" id="norm" />
        <input type="button" name="economy" value="Economy"  id="eco" />
    </div>

＆＃13;

将两个元件并排放置在底部？

4 个答案: