html - 如何将两个标题与css放在同一行？

Question

看到这个小提琴 JSFiddle

CSS：

.containers {
width:100%;
height:auto;
padding:10px;
margin-bottom:0px;
}

#id4 {
float:right;
margin-right:0;
display:inline;
    border:5px solid red;
}

#id5 {
text-align:center;
    border:5px solid red;
}

HTML：

<div class='containers'>
<div id='id4'>
margin-right:10px;
</div>
<div id='id5'>
    center-text;
</div>

在这个小提琴中，我希望中心文本成为页面的中心，而不是在左边框和浮动元素之间的中心。

Answer 1

以下是通过添加position: absolute; right: 10px;到id4div 的一种可能选项。这将使 div 始终保持在距右边距 10px 的位置。但必须注意，该元素不再是浮动元素。

注意：如果结果窗口缩小超过一定水平，文本会重叠。如果我设法找到解决办法，我会更新答案。

.containers {
    width: 100%;
    height: auto;
    padding: 10px;
    margin-bottom: 0px;
    text-align: center;
    box-sizing: border-box;
}
#id4 {
    display: inline-block;
    position: absolute;
    right: 10px;
    border: 5px solid red;
}
#id5 {
    display: inline-block;
    border: 5px solid red;
}

Answer 2

.containers {
    width:100%;
    height:auto;
    padding:10px;
    margin-bottom:0px;
    text-align:center;
}

#id4 {
    float:right;
    margin-right:0;
    display:inline;
    border:5px solid red;
}
#id5 {
    margin: 0 auto;
    display:inline-block;
    border:5px solid red;
}

演示