Html 将导航条移到div的右侧

我是CSS新手，我正在尝试将导航栏移动到div包装器的右侧。我有一个标志图像在左边，并希望导航栏在右边。 当我使用

float:right

时，导航条位于div的右侧。但是，列表中的每个水平按钮都会回到垂直位置

见示例：

我已经读过可以纠正这一点的文章，使用

position:relative

到父包装器，然后使用

position:absolute

到导航栏。但我试图找出为什么

float:right

属性会垂直移动所有按钮

这是我的密码：``

.mainwidth{
宽度：100%；
边框底部：3px实心#0099FF；
浮动：左；
}
.mainwrapper{
宽度：1200px；
保证金：自动；
}
.main.img{
边缘顶部：30px；
浮动：左；
}
.mainbar ul{
列表样式类型：无；
框大小：边框框；
背景颜色：橙色；
浮动：对；
}
梅因巴尔·乌尔·李a{
显示：块；
文字装饰：无；
颜色：#0099FF；
文本对齐：居中；
浮动：左；
}

机构

您可以在css、.mainwrapper或.mainbar中使用所需的位置

---

您需要使列表项内联块。其他一切都可以保持阻塞，这不是问题

这是可行的（还有一些空白，这样链接就不会碰到一个大字）：

---

你也可能不需要在你的ul上加一个div。您可以将.mainbar类直接放在ul上，将ul从CSS中去掉，然后将其浮动-其余的浮动是多余的。但我离题了。

将.main ul li-->

显示：块

更改为

显示：内联块

您可以发布HTML的其余部分吗？您好@APAD1，我已经添加了HTML的其余部分。@drwist我也尝试过，但按钮仍然是垂直的，而不是水平的。相关：

 margin-left:30px;

.mainbar li {
  display: inline-block;
  margin-right: 1em;
}