html - 没有空格的流体 CSS 容器

Question

错误:

正确:

如何实现(元素之间没有空格)？它们也必须居中。

HTML:

<div class="header container">
    <div class="col col-1">
        <input type="text" class="text small" name="search" placeholder="Search suppliers">
    </div>
    <div class="col col-2">
        <div class="styled-select">
            <select>
                <option>asd</option>
            </select>
        </div>
    </div>
    <div class="col col-3">
        <a href="#" class="classname">Reset</a>
        <a href="#" class="classname2">Search</a>
    </div>
</div>

CSS:

.header {
    display: table;
    width: 100%;
    height: 120px;
    text-align: center;
}

.header > div {
    display: table-cell;
    vertical-align:middle;
}

.col {
    width:20%;
}

有人可以帮忙吗？

Answer 1

只需将所有 div.col 设置为内联 block 定位，并在您的容器上设置 'text-align:center' 使其水平居中。

.container {
    text-align:center;
}
.container .col {
    display:inline-block;
}