Html 将两个东西放在一起

我需要显示的文字说，名称的左侧和列表的右侧彼此相邻

正文{
字体系列：nunito；
}
主要负责人{
浮动：左；
位置：相对位置；
}
保险商实验室{
列表样式：无；
填充：0；
保证金：0；
}
紫色盒子{
背景色：#ba68c8；
}

名称

我在“标题、ul和li”中做了更改

---

据我所知，您实际上并不需要在

mainmaneheader

类中实现的css，因此我已将其删除

通过将

inline block

指定给标题中的所有元素，可以确保它们并排出现

正文{
字体系列：nunito；
}
标题*{
显示：内联块；
}
保险商实验室{
列表样式：无；
填充：0；
保证金：0；
}
紫色盒子{
背景色：#ba68c8；
}

名称

您可以添加标题显示：flex以使子元素灵活，如果您想水平居中，可以添加对齐项目：居中

正文{
字体系列：nunito；
}
标题{
显示器：flex；
对齐项目：居中；
}
主要负责人{
位置：相对位置；
}
保险商实验室{
列表样式：无；
填充：0；
保证金：0；
显示器：flex；
对齐项目：居中；
}
紫色盒子{
背景色：#ba68c8；
}

名称

尝试给出标题

显示：flex

和

高度

，因此您可以设置

行高度

并将文本对齐！之后，您可以给出

ul

宽度：100%因此它占据了允许的整个宽度！然后您可以给
ul
一个
text align:right
使其保持在右侧


*{
保证金：0；
填充：0；
}
标题{
显示器：flex；
高度：50px；
线高：50px；
填充：20px；
背景色：#fff1cc；
}
保险商实验室{
填充：0；
保证金：0；
宽度：100%；
文本对齐：右对齐；
}
李{
列表样式：无；
显示：内联；
}

名称









body {
    font-family: nunito;
}

header{
    display: flex;
    align-items: center;
}

ul {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}
li{
    list-style: none;
}

.purplebox {
    background-color: #ba68c8;
}