html - 拼图 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