如何使用浮动左右和垂直对齐中间？

Question

我需要将logo左对齐，navigation对齐，logo和navigation中的文字必须与logo-nav div对齐。

注意：没有弹性框

.logo {
  float: left;
}
.navigation {
  float: right;
}
.clear {
  clear: both;
}

<div class="logo-nav">
  <div class="logo">Partners</div>
  <div class="navigation">
    <ul class="nav-ul">
      <li class="nav-li">OUR SPIRIT</li>
      <li class="nav-li">OUR OFFER</li>
      <li class="nav-li">OUR VISIONARY</li>
      <li class="nav-li">CONTACT</li>
    </ul>
  </div>
  <div class="clear"></div>
</div>

Answer 1

您可以使用Flexbox。您只需在margin-left: auto和navigation上设置align-items: flex-end进行垂直对齐。

.logo img {
  vertical-align: top;
}
.logo-nav, .nav-ul {
  display: flex;
  align-items: flex-end;
  list-style: none;
  margin: 0;
}
.navigation {
  margin-left: auto;
}

<div class="logo-nav">
  <div class="logo"><img src="http://placehold.it/100x50"></div>
  <div class="navigation">
    <ul class="nav-ul">
      <li class="nav-li">OUR SPIRIT</li>
      <li class="nav-li">OUR OFFER</li>
      <li class="nav-li">OUR VISIONARY</li>
      <li class="nav-li">CONTACT</li>
    </ul>
  </div>
  <div class="clear"></div>
</div>

您也可以使用CSS表。

.logo img {
  vertical-align: top;
}
.logo-nav {
  display: table;
  width: 100%;
  border-bottom: 1px solid black;
}
ul {
  margin: 0;
}
.logo,
.navigation {
  display: table-cell;
  vertical-align: bottom;
}
.navigation {
  text-align: right;
}
li {
  display: inline-block;
}

<div class="logo-nav">
  <div class="logo">
    <img src="http://placehold.it/100x50">
  </div>
  <div class="navigation">
    <ul class="nav-ul">
      <li class="nav-li">OUR SPIRIT</li>
      <li class="nav-li">OUR OFFER</li>
      <li class="nav-li">OUR VISIONARY</li>
      <li class="nav-li">CONTACT</li>
    </ul>
  </div>
  <div class="clear"></div>
</div>

Answer 2

＆＃13;

＆＃13;

.logo-nav{
  height:40px;
  border-bottom:1px solid black;
  width:100%;
  margin:0;
  padding:0;
}
.navigation{
  float:right;
  margin:0;
  padding:0;
  height:100%;
}
.navigation ul{
  margin:0;
  padding:0;
  height:100%;
}
.navigation ul li{
  margin:0;
  padding:0;
  float:left;
  margin:0 5px;
  list-style-type:none;
  display:flex;
  align-items:flex-end;
  height:100%;
}
.logo{
  float:left;
  margin:0;
  padding:0;
  height:100%;
  display:flex;
  align-items:flex-end;
}

＆＃13;

    <div class="logo-nav">
        <div class="logo">+CoPartners</div>
        <div class="navigation">
            <ul class="nav-ul">
                <li class="nav-li">OUR SPIRIT</li>
                <li class="nav-li">OUR OFFER</li>
                <li class="nav-li">OUR VISIONARY</li>
                <li class="nav-li">CONTACT</li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

添加以下css

.nav-ul li{float:left; list-style:none;padding:0 5px;}
.nav-ul{padding:0;margin:0;}

Answer 4

由于浮点数无法实现，因此您可以使用display: inline-block。它就像一个穷人flex。

.logo-nav {
  text-align: justify;
}
.logo-nav::after {
  /* you can omit this by using `text-align-last` */
  content: '';
  width: 100%;
  display: inline-block;
}
.logo {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  width: 50%;
}
.navigation {
  display: inline-block;
  vertical-align: bottom;
  text-align: right;
  width: 50%;
}
.clear {
  /* this element is obsolete now */
}

注意：标记中的.logo和.navigation之间不能有空格。

Answer 5

您是否可以使用绝对位置？

＆＃13;

＆＃13;

li{
   float: left;
   padding: 0 5px;
}
ul{     
  list-style: none;
  position: absolute;
  right: 0;
  margin: 0;
  bottom: 0;
}
img{
  display: block;
}
.logo{
  float: left;
}
.logo-nav{
  background: lightblue;
  position: relative;
}
.logo-nav:after{
  display: block;
  clear: both;
  content: "";
}

＆＃13;

<div class="logo-nav">
        <div class="logo"><img src="http://placehold.it/100x50"></div>
        <div class="navigation">
            <ul class="nav-ul">
                <li class="nav-li">OUR SPIRIT</li>
                <li class="nav-li">OUR OFFER</li>
                <li class="nav-li">OUR VISIONARY</li>
                <li class="nav-li">CONTACT</li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>

＆＃13;

＆＃13;

＆＃13;