html - 在底部并排放置两个元素？

Question

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

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

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

但它以一个按钮结束，另一个是隐藏的!!

Answer 1

让你的容器 absolute 而不是按钮。像这样:

#btmBtnsContainers {
  width: 100%;
  position: absolute;
  bottom: 0;
  left:0;
  z-index: 999;
}

#norm,
#eco {
  background-color: #210511;
  color: white;
  width: 50%;
  float:left;
}

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