流体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设置为内联块定位，并在容器上设置'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;
}

另外，要删除每个.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％宽度！