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使用 inline-block 定位设置所有内容，然后'text-align:center'在容器上设置以使其水平居中。

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

Answer 2

使用display: inline-block.

.header {
    width: 100%;
    height:120px;
    text-align:center;
}
.col {
    display: inline-block;
    vertical-align:middle;
}

此外，要删除每个 div 之间的空格.col，请确保每个开始和结束div 标记之间没有空格。

<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"> <!-- THIS LINE - no white-space -->
        <div class="styled-select">
            <select>
                <option>asd</option>
            </select>
            </div>
        </div><div class="col col-3"> <!-- THIS LINE - no white-space also -->
          <a href="#" class="classname">Reset</a>
          <a href="#" class="classname2">Search</a>
        </div>
    </div>
</div>

Answer 3

为了得到你想要的，你需要一个额外的 HTML 包装器。

http://jsfiddle.net/h37J4/

.header {
width: 100%;
height:120px;
}
.header > .row {
    max-width: 360px;
    margin: 0 auto;
    overflow: hidden; /*quick cleafix hack */
}
.col {
    float: left;
}

Answer 4

你需要一个这样的内容包装器：

<div class="header container">
        <div class="wrapper">
            <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 class="wrapper">
</div>

然后使用 css 对包装器进行样式设置，如下所示：

.header .wrapper {
    width: 70%; /* or any in px */
    margin: 0 auto; /* for centering */
}

或者你可以用更小的数字替换你的“.header”元素的 100% 宽度！