我在尝试将div包装器置于行中

Question

我尝试了很多东西，包括这里的一些例子，但我显然没有正确编码，而且我已经花了太多时间在上面，所以我要求帮助。< / p>

我有一个包含在包装器div中的图像精灵。我想做的就是将包装器放在一排。听起来很简单我知道，但我已经尝试过了，我能做到的唯一方法是在包装器上设置一个宽度，但我不想要它，因为它需要响应较小的屏幕宽度。

内容的html是

<div class="row row-centered">
<div class="industry_logos col-centered col-max">
    <dl class="logo_links clearfix">
        <div class="logos-wrapper col-centered">
                <dt>Chas</dt>
                <dd><a href="#" rel="external" class="chas" title="Chas Accreditation">Chas</a></dd>

                <dt>Construction Skills</dt>
                <dd><a href="#" rel="external" class="const-skills" title="Construction Skills">Construction Skills</a></dd>

                <dt>Construction Line</dt>
                <dd><a href="#" rel="external" class="const-line" title="Construction Line">Construction Line</a></dd>

                <dt>European Builders Confederation</dt>
                <dd><a href="#" rel="external" class="ebc" title="European Builders Confederation">EBC</a></dd>

                <dt>Federation of Master Builders</dt>
                <dd><a href="#" rel="external" class="fmb" title="Federation of Master Builders">FMB</a></dd>

                <dt>SMAS</dt>
                <dd><a href="#" rel="external" class="smas" title="SmartSafe">SMAS</a></dd>

            <div class="clearfloat"></div>  
        </div>      
    </dl>
    <div class="clearfloat"></div>
</div>
</div>

我使用的CSS如下。

    .industry_logos{margin:0 auto;}
.logos-wrapper{ margin:0 auto;}
.industry_logos dl.logo_links dt {
    display:none;
}

.industry_logos dl.logo_links a {
    display:block;
    float:left;
    text-indent:-9000px;
    overflow:hidden;
    background:url(../img/logos/logo_sprites_med.png) no-repeat;
    margin-right:10px;
}

.industry_logos dl.logo_links a.chas {
    background-position: 0px -63px;
    width:72px;
    height:56px;
}

.industry_logos dl.logo_links a.chas:hover {
    background-position: 0px -1px;
    width:72px;
    height:56px;
}

.industry_logos dl.logo_links a.const-skills {
    background-position: -72px -65px;
    width:113px;
    height:56px;
}

.industry_logos dl.logo_links a.const-skills:hover {
    background-position: -72px -3px;
    width:113px;
    height:56px;
}

.industry_logos dl.logo_links a.const-line {
    background-position: -185px -62px;
    width:100px;
    height:56px;
}

.industry_logos dl.logo_links a.const-line:hover {
    background-position: -185px 0px;
    width:100px;
    height:56px;
}

.industry_logos dl.logo_links a.ebc {
    background-position: -285px -62px;
    width:58px;
    height:56px;
}

.industry_logos dl.logo_links a.ebc:hover {
    background-position: -285px 0px;
    width:58px;
    height:56px;
}

.industry_logos dl.logo_links a.fmb {
    background-position: -344px -62px;
    width:47px;
    height:56px;
}

.industry_logos dl.logo_links a.fmb:hover {
    background-position: -344px 0px;
    width:47px;
    height:56px;
}

.industry_logos dl.logo_links a.smas {
    background-position: -394px -62px;
    width:110px;
    height:56px;
}

.industry_logos dl.logo_links a.smas:hover {
    background-position: -394px 0px;
    width:110px;
    height:56px;
}

.industry_logos.col-centered {
display: inline-block;
float: none;
text-align: left;
margin-right: -4px;
/* Contact Form */

table {
    width:100%;
    padding:5px;
}


/* Centred Row Styling */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}
.col-fixed {
    /* custom width */
    width:320px;
}
.col-min {
    /* custom min width */
    min-width:320px;
}
.col-max {
    /* custom max width */
    max-width:320px;
}

/* visual styles */
body {
    padding-bottom:40px;
}
h1 {
    margin:40px 0px 20px 0px;
    color:#95c500;
    font-size:28px;
    line-height:34px;
    text-align:center;
}

[class*="col-"] {
    padding-top:10px;
    padding-bottom:15px;
    border:1px solid #80aa00;
    background:#d6ec94;
}
[class*="col-"]:before {
    display:block;position:relative;
    content:"COLUMN";
    margin-bottom:8px;
    font-family:sans-serif;
    font-size:10px;
    letter-spacing:1px;
    color:#658600;
    text-align:left;
}

由于声誉低，我无法发布图片。非常感谢解决方案。