具有垂直文本对齐的相等导航高度和徽标

Question

我有一个简单的导航我试图重新创建并且我已经到了正确的部分并且我已经被卡住了，橙色的li没有填满100％而我需要链接不中心但对齐中间。我想要完成的一个例子

这是我想要实现的page example。截图：

这是我到目前为止所做的：

＆＃13;

＆＃13;

.page-header{
	display: inline-block;
    margin: 0;
    position: absolute;
    vertical-align: middle;
    width: 100%;
    z-index: 110;
	background-color: aqua;
}
.header-standard {	
	height: 86px;	
}
.branding{
	display: block;
	float: left;
}
.branding img {
	height: 60px;
	margin: 15px 25px;
}
.standard-nav{
	height: 100%;
	display: block;
	float: right;
}
.special-link {
	display: inline;
    background-color: #ff5252;
    width: 200px;
	height: auto;
    text-align: center;
	margin: 0;
}
.standard-nav > ul > li {    
	bottom: 0;
}
.standard-nav ul li {
	display: inline-block;
	padding: 0;
	margin: 0;
}

＆＃13;

<header class="page-header">
  <div class="header-standard">
  <div class="branding">
  	<img src="http://via.placeholder.com/350x150">
  </div>
  <nav class="standard-nav">
  	<ul>
  		<li>Link 1</li>
  		<li>Link 2</li>
  		<li>Link 3</li>
  		<li>Link 4</li>
  		<li class="special-link">Special Link</li>
  	</ul>
  </nav>
  	
  </div>
</header>​

＆＃13;

＆＃13;

＆＃13;

Answer 1

沿着弹性线尝试一些东西。当然，您需要根据您支持的浏览器添加前缀。

HTML

<header class="page-header header-standard">

    <div class="branding">
      <img src="http://via.placeholder.com/350x150">
    </div>

    <nav class="standard-nav">
      <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
        <li class="special-link">Special Link</li>
      </ul>
    </nav>

</header>

CSS

header,
nav,
nav ul {
  display: flex;
  align-items: stretch;
}

nav {
  flex: 1;
  justify-content: flex-end;
}

nav li {
  display: flex;
  align-items: center;
  height: 100%;
}

这是一个JsFiddle示例： https://jsfiddle.net/0xz5of71/1/

Answer 2

您可以使用flexbox而不是float来处理此布局。

.page-header {
  margin: 0;
  position: absolute;
  width: 100%;
  z-index: 110;
  background-color: aqua;
}

.header-standard {
  height: 86px;
  display: flex;
  justify-content: space-between;
}


.branding img {
  height: 60px;
  margin: 15px 25px;
}

.standard-nav {
  height: 100%;
  display: flex;
  align-items: center;
}

.standard-nav ul {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
}

.special-link {
  background-color: #ff5252;
  width: 200px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.standard-nav ul li {
  list-style: none;
  padding-right: .5em;
}

<header class="page-header">
  <div class="header-standard">
    <div class="branding">
      <img src="http://via.placeholder.com/350x150">
    </div>
    <nav class="standard-nav">
      <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
        <li class="special-link">Special Link</li>
      </ul>
    </nav>

  </div>
</header>​

Answer 3

您需要将height: 100%; margin: 0; line-height: 86px添加到ul并修复左侧元素的高度，因为它会扩展父级的高度。

.page-header{
	display: inline-block;
    margin: 0;
    position: absolute;
    vertical-align: middle;
    width: 100%;
    z-index: 110;
	background-color: aqua;
}
.header-standard {	
	height: 86px;	
}
.branding{
	display: block;
	float: left;
}
.branding img {
	height: 60px;
	margin: 15px 25px;
}
.standard-nav{
	height: 100%;
	display: block;
	float: right;
}
.special-link {
	display: inline;
    background-color: #ff5252;
    width: 200px;
	height: auto;
    text-align: center;
	margin: 0;
}
.standard-nav > ul > li {    
	bottom: 0;
}
.standard-nav > ul {
  margin: 0;
  line-height: 86px;
  height: 100%:
}
.standard-nav ul li {
	display: inline-block;
	padding: 0;
	margin: 0;
}

<header class="page-header">
  <div class="header-standard">
  <div class="branding">
  	<img src="http://via.placeholder.com/350x150">
  </div>
  <nav class="standard-nav">
  	<ul>
  		<li>Link 1</li>
  		<li>Link 2</li>
  		<li>Link 3</li>
  		<li>Link 4</li>
  		<li class="special-link">Special Link</li>
  	</ul>
  </nav>
  	
  </div>
</header>​

Answer 4

您只能浮动徽标，然后将导航文本对齐而不会浮动。

其他display:table/flex/grid以避免浮动也是选项。

.page-header {
  position: absolute;
  width: 100%;
  z-index: 1;
  background-color: aqua;
}

.header-standard {}

body{margin:0;}

.branding {
  float: left;
}

.branding img {
  height: 60px;
  margin-left: 25px;
}

.standard-nav {
  text-align: right;
}

.special-link {
  background-color: #ff5252;
}

.standard-nav ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}

.standard-nav ul li a {
  display: inline-block;
  line-height: 60px;
  padding: 0 0.5em
}

<header class="page-header">
  <div class="header-standard">
    <div class="branding">
      <img src="http://via.placeholder.com/350x150">
    </div>
    <nav class="standard-nav">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a class="special-link" href="#">Special Link</a></li>
      </ul>
    </nav>

  </div>
</header>​