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

首先检查这个。我放置了一个图像按钮，该按钮没有右端浮动；标题稍微向左移动。



但是标题应该位于中间，如下所示：



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

这是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;*/
}

因此，标题窗格必须忽略分配给菜单按钮的空间。我该如何处理？

最佳答案

您可以：


在absolute中设置浮动元素

.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浮点伪指令。

.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的垂直对齐方式