首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >基础5定位问题

基础5定位问题
EN

Stack Overflow用户
提问于 2014-08-07 22:03:03
回答 1查看 54关注 0票数 0

我在定位图标栏时遇到问题。我想要的是让我的工具栏位于屏幕的左侧,但出于某种原因,它是自动居中的。我的条形码是:

代码语言:javascript
运行
复制
<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中的开发人员工具窗口,我可以看到我的栏应该可以容纳的额外区域,但它不会使用它。有人知道为什么会这样吗?

EN

回答 1

Stack Overflow用户

发布于 2014-08-08 00:03:04

看起来你一定有其他的CSS在影响它我把你的html粘贴到了一个代码中:http://codepen.io/pituki/pen/dcbpB

代码语言:javascript
运行
复制
<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。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25184593

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档