如何在不更改HTML结构的情况下更改CSS中元素的位置

Question

我有这个例子：

.icon-test {
width: 20px;
height: 10px;
background: red;
display: block;
}
.header-content {
display:flex;
align-items: center;
gap: 20px;
}
.top-menu {
display: flex;
list-style-type: none;
font-style: initial;
gap: 20px;
margin: 0;
padding: 0;
}

<div class="header">
<div class="panel-wrapper">
<input type="text"/>
</div>
<div class="header-content">
<ul class="top-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<span>Here you need to insert the input without changing the HTML structure</span>
<i class="icon-test"></i>
</div>
</div>

我想做的是在不更改HTML结构的情况下将<input>元素移到菜单旁边。

我试着用display:flex做这件事，但没有成功。

这是可能的还是有必要改变结构？

Answer 1

将display: inline-block添加到.panel包装器和.header内容

Answer 2

将float: right添加到面板包装

.icon-test {
width: 20px;
height: 10px;
background: red;
display: block;
}
.panel-wrapper{
display: inline-block;
float: right
}
.header-content {
display:inline-block;
align-items: center;
gap: 20px;
}
.top-menu {
display: flex;
list-style-type: none;
font-style: initial;
gap: 20px;
margin: 0;
padding: 0;
}

<div class="header">
<div class="panel-wrapper">
<input type="text"/>
</div>
<div class="header-content">
<ul class="top-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<span>Here you need to insert the input without changing the HTML structure</span>
<i class="icon-test"></i>
</div>
</div>