基金会5定位问题

时间:2014-08-07 14:03:03

标签: html css zurb-foundation

我在定位图标栏时遇到问题。我想要的是我的酒吧拥抱屏幕的左侧,但由于某种原因,它是自动居中。我的酒吧的代码是:

<div class="row">
    <div class="small-12 column">
        <div class="icon-bar six-up left">
            <a class="item">
                <img class="small" src="images/32x32/home.png">
                <label>Home</label>
            </a>
            <a class="item">
                <img class="small" src="images/32x32/shipping.png">
                <label>Shipping</label>
            </a>
            <a class="item">
                <img class="small" src="images/32x32/database.png">
                <label>Search</label>
            </a>
            <a class="item">
                <img class="small" src="images/32x32/invoice.png">
                <label>Invoices</label>
            </a>
            <a class="item">
                <img class="small" src="images/32x32/settings.png">
                <label>Settings</label>
            </a>
            <a class="item">
                <img class="small" src="images/32x32/featured.png">
                <label>Bug Tracker</label>
            </a>
        </div>
    </div>
</div>

理论上这种声音会使条形图左对齐到屏幕边缘。我也尝试过使用CSS并使用left:0,position:absolute和那些不起作用。使用Chrome中的开发人员工具窗口,我可以看到我的栏应该能够适应的额外区域,它只是不会使用它。有谁知道为什么会这样?

enter image description here

1 个答案:

答案 0 :(得分:0)

看起来你必须有其他CSS感染它我把你的HTML粘贴到codepen中: http://codepen.io/pituki/pen/dcbpB

<div class="row">
    <div class="small-12 column">
        <div class="icon-bar six-up left">
            <a class="item">
                <img class="small" src="images/32x32/home.png">
                <label>Home</label>
            </a>
            <a class="item">
                <img class="small" src="images/32x32/shipping.png">
                <label>Shipping</label>
            </a>
            <a class="item">
                <img class="small" src="images/32x32/database.png">
                <label>Search</label>
            </a>
            <a class="item">
                <img class="small" src="images/32x32/invoice.png">
                <label>Invoices</label>
            </a>
            <a class="item">
                <img class="small" src="images/32x32/settings.png">
                <label>Settings</label>
            </a>
            <a class="item">
                <img class="small" src="images/32x32/featured.png">
                <label>Bug Tracker</label>
            </a>
        </div>
    </div>
</div>

如果您使用firefox或chrome开发人员工具检查元素并查看是否有另一条css规则影响您的居中,请使用firebug。