拼图片html / css

Question

我需要创建一个标题，根据正在构建的页面轻松添加或删除多个部分，并且我遇到了一个部分出现问题。

我有一个标题，看起来像

中的所有组件

如果导航被删除，它应该适应这样（垂直居中）

我的问题是如何在CSS中完成这样的事情。它还需要在IE8中工作。

Answer 1

我认为这就是你要找的东西。 现在您可以更改其位置或删除它们，并在导航栏中添加或删除按钮。 但请记住，您必须保留一些间距标准以实现良好的设计，因此，显然您需要更改高度并可能添加一些填充/边距。请注意，每个边框填充总标题高度的1px

<div class="header">
    <div class="navWrap">
        <input type="search" class="nav-search">  
        <ul class="nav-list">
            <li>Apps</li>
            <li>Games</li>
            <li>Movies</li>
            <li>Books</li>
            <li>Newspapers</li>
        </ul>
   </div>

.header,
.nav-list{
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.header{
    height: 120px;
    border-bottom: solid 1px black;
    align-items: center;
}

.navWap{
    height: inherit;
}

.nav-search,
.nav-list {
    width: 700px;
    height: 40px;
    line-height: 40px;
}

.nav-list ~ .nav-search,
.nav-search ~ .nav-list{
    margin-top: 12px;
}

.nav-list > li{
    text-align: center;
    flex-grow:1;
    border: solid 1px black;
    border-right: none;
}

.nav-list > li:last-child{
    border-right: solid 1px black;
}

在这里工作：

http://codepen.io/EderIraizoz/pen/EaBgWg