css – 将内联元素对齐

前端之家收集整理的这篇文章主要介绍了css – 将内联元素对齐前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何对齐两个文本元素,一个在左边,另一个在右边,也在同一行.我知道可以使用浮点数完成,但我想要一个浮点数的解决方案.我正在寻找一种方法来使用display:inline.

HTML

<div class="contailner">
    <div class="inlineLeft">Item 1</div>
    <div class="inlineRight">Item 2</div>
</div>

CSS:

.container {
    width: 600px;
    border: 1px solid blue;
}

.inlineLeft,.inlineRight {
    display: inline;
}

.inlineRight {
    ...align right...   
}

解决方法

你可以使用position:absolute对内联元素和位置:relative在容器上.然后,您可以按照您想要的容器对齐内联元素.这样的东西
.container {
    position: relative;
    width: 600px;
    border: 1px solid blue;
}

.inlineLeft,.inlineRight {
    position: absolute;
    display: inline;
}

.inlineRight {
    right: 0;
}

DEMO

原文链接:https://www.f2er.com/css/214392.html

猜你在找的CSS相关文章