代码之家 › 专栏 › 技术社区 › cdarwin

如何水平对齐div,同时向右对齐div

css html

cdarwin · 技术社区 · 6 年前

底部应该是M的底部,而不是y的底部。编辑 :作为第二个选择,所有元素都可以与“我的文本”的垂直中心对齐。

按钮3和4必须向右对齐。

如果没有足够的空间, My text

我试着用 float: right 运气不好,因为按钮3和4在右上缘。我试着将它们显示为内联,但这样它们就不会在右侧对齐。我不知道还能尝试什么。

我当前的代码如下,这使我与Firefox的底部对齐,而不是与Chrome的底部对齐(如您所见,按钮3和4与按钮1和2不对齐)

我希望有人能帮助我。

div.inline { 
display: inline-block;
}

			
<div id="titleBar">
<div class="inline" style="position: relative; width: 100%;">
	<div class="inline" style="font-weight: bold; font-size: 2em; color: #D00000;">My text</div>
	<div class="inline">
		<form>
			<div class="inline">
				<input type="text" style="width: 16em" value="input text">&nbsp;
			</div>
			<div class="inline">
				<input type="submit" value="button 1"></input>
				<button>button 2</button>
			</div>
		</form>
	</div>

	<div style="position: absolute; bottom: 0px; right: 0px;">
		<button >button 3</button>
		<button >button 4</button>
	</div>
</div>
</div>