Html 如何内联导航栏元素

我正在使用以下代码设计navbar我简单的一面：

Html:

正如我的代码片段所示（）。徽标向左浮动，菜单向右浮动。但问题是，菜单位于顶部，实际上希望它位于底部。 我如何才能真正让菜单移到底部，并保持其向右浮动？

我可以看到一些问题：

对于第一个标签，它没有关闭

如果不使用，可以删除第2个a

ul不能与li一起使用，因此，将其更改为div或span

删除浮动：从导航栏右类的权利，它将在底部的标志

添加一个带magin的ul类，填充0

ul{
列表样式：无；
显示：内联；
保证金：0；
填充：0；
}
李{
列表样式：无；
显示：内联；
宽度：100%；
填充：10px 10px 10px 0；
}
ul.navbar-brand{
浮动：左；
}
ul.navbar-right{
}

家
关于
交付
服务

@为了更好地理解，我刚刚编辑了我的问题。并不是说菜单应该放在图片后面。我只想将菜单向下移动到它所在的位置，但保持它向右浮动。希望我说得有点道理。你有任何图片或截图来更清楚地表达你的期望吗？如果你检查这个主题不完全相同，因为那里的菜单没有向右浮动。菜单和徽标显示在同一行中，菜单位于底部。相比之下，我的答案更靠前。你可能想用这些信息编辑你现有的答案吗？你能更新现有的代码吗。将对此进行更改

<div>
  <ul class="navbar-brand">
    <a href='https://postimg.org/image/ukcombaed/' target='_blank'><img src='https://s10.postimg.org/7vnhmqt0p/IMG_20160804_WA032.jpg' border='0' alt='IMG-20160804-WA032'/><br /><a target='_blank' href='https://postimage.org/'>    </a><br /><br />
  </ul>
  <ul class="navbar-right">
    <li>home</li>
    <li>about</li>
    <li>delivery</li>
    <li>services</li>
  </ul> 
</div>

ul{
  list-style:none;
  display:inline;
}
li{
  list-style: none;
  display: inline;
  width:100%;
  padding: 10px;
}
ul.navbar-brand{
  float:left;
}
ul.navbar-right{
  float:right;
}

ul.navbar-right{
  float:right;
  position:relative;
  bottom:0;
}