html - 我应该如何对齐忽略同一级别 float 的文本？

Question

首先检查这个。我在右端放置了一个 float 的图像按钮；并且标题稍微向左移动。

但标题应该像下面这样位于中心:

我认为标题的空间缩小了一点，因为图像按钮占用了一点空间。

这是 html 源。

<div class="title">TourismKorea
    <div class="menubtn">
        <a href="#"><img src="assets/images/menuicon.png" style="height: 100%;"></a>
    </div>
</div>

我给了他们这样的样式:

.title{
    margin: 0 auto;
    width: 100%;
    background: #f8f8f8;

    font-size: 1.6em;
    text-align: center;}

.menubtn{
    float: right;
    margin: 0.2rem 0.2rem;
    height: 1.2rem;
    border: 0;
    /*display: none;*/
}

所以标题 Pane 必须忽略给菜单按钮的空间。我该如何处理？

Answer 1

你可以:

• 在absolute中设置 float 元素

.title{
    margin: 0 auto;
    width: 100%;
    background: linear-gradient(to left, transparent 50%, gray 50%);
    position:relative;
    font-size: 1.6em;
    text-align: center;}

.menubtn{
    float: right;
    margin: 0.2rem 0.2rem;
    height: 1.2rem;
    width:1.2rem;
    border: 0;
    position:absolute;
    right:0;
    top:0;
}

<div class="title">TourismKorea
    <div class="menubtn">
        <a href="#"><img src="assets/images/menuicon.png" alt="X" style="height: 100%;"></a>
    </div>
</div>

• 添加一个相等的负 margin 以将其 width 减小到几乎为零

.title{
    margin: 0 auto;
    width: 100%;
    background: linear-gradient(to left, transparent 50%, gray 50%);
    font-size: 1.6em;
    text-align: center;}

.menubtn{
    float: right;
    margin: 0.2rem 0.2rem;
    height: 1.2rem;
    width:1.2rem;
    margin-left:-1.2rem;
    border: 0;
}

<div class="title">TourismKorea
    <div class="menubtn">
        <a href="#"><img src="assets/images/menuicon.png" alt="X" style="height: 100%;"></a>
    </div>
</div>

• 添加一个 :before 相同 width 的 float 伪。

.title{
    margin: 0 auto;
    width: 100%;
    background: linear-gradient(to left, transparent 50%, gray 50%);
    font-size: 1.6em;
    text-align: center;}
.title:before {
content:'';
float:left;
width:1.2rem;
height:1.2rem;
}
.menubtn{
    float: right;
    margin: 0.2rem 0.2rem;
    height: 1.2rem;
    width:1.2rem;
    border: 0;
}

<div class="title">TourismKorea
    <div class="menubtn">
        <a href="#"><img src="assets/images/menuicon.png" alt="X" style="height: 100%;"></a>
    </div>
</div>

第三个示例可以变成 flex 以轻松设置文本和 burgermenu 的垂直对齐方式