Question

试图让这些div在彼此的旁边排成一行而没有它们之间的空间。不确定发生了什么......我已经尝试了一切，我只是想不出这是什么......我知道这是一个简单的修复，但它似乎似乎不想工作。奇怪的是，有时候我正在搞乱Chrome上的实时代码，它神奇地似乎暂时工作......

感谢任何帮助。

这是我的小提琴：http://jsfiddle.net/2jL5D/

HTML

<div class="table-Container">
    <div id="fan-free-container">
        FAN-FREE AND ENERGY EFFICIENT<br>
        <div id="seriesContainer">
            <div id="tx4200Container"><div class="txHeader">TX4200E</div></div>
            <div id="ks6700Container"><div class="ksHeader">KS6700</div></div>
            <div id="ks7200Container"><div class="ksHeader">KS7200</div></div>
            <div id="ks7500Container"><div class="ksHeader">KS7500</div></div>
            <div id="ks7700Container"><div class="ksHeader">KS7700</div></div>
        </div>
    </div>
</div>

CSS

#fan-free-container {
    background: rgb(230,231,233);
    -moz-border-radius:10px 10px 0px 0px;
    -webkit-border-radius:10px 10px 0px 0px;
    border-radius:10px 10px 0px 0px;
    text-align: center;
    border-style: solid;
    border-color: #c4c5c6;
    border-width: 2px;
}

#seriesContainer > div{
    display: inline-block;
}

#seriesContainer div > div{
    padding: 4px 25px;
    color: white;
    font-weight: bold;
    border-style: solid;
    border-color: #c4c5c6;
    border-width: 2px;
}

.txHeader {
    background: -webkit-linear-gradient(#af9358, #ded1b9); /* For Safari */
    background: -o-linear-gradient(#af9358, #ded1b9); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#af9358, #ded1b9); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#af9358, #ded1b9); /* Standard syntax (must be last) */
}

.ksHeader {
    background: -webkit-linear-gradient(#06426b, #93a7c2); /* For Safari */
    background: -o-linear-gradient(#06426b, #93a7c2); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#06426b, #93a7c2); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#06426b, #93a7c2); /* Standard syntax (must be last) */
}

Answer 1

内联元素对空白区域很敏感，因此您可以像在 jsFiddle example 中一样消除div之间的空格。

您还可以在它们之间使用HTML注释，例如：</div></div>。的 jsfiddle example

CSS内联Div隐形间距？

1 个答案: