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;添加到id4 div的一种可能选项。这将使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;
}

<强> DEMO

如何在css的同一行中有两个标题？

2 个答案: