Question

我写了一个响应式页脚，如屏幕截图所示：

文字HELP和back icon不向左浮动，但在中间被击中。我怎么能把它移到左边？
这是代码：
HTML code ：

<div id = "footer">

                <span id = "logout" class="pull-right">
                   <span id = "logoutIcon"></span>
                    <span id = "logoutText">
                        LOGOUT
                    </span>
                </span>

                <span id = "logout1" class="pull-right">
                   <span id = "logoutIcon1"></span>
                    <span id = "logoutText1">
                        HELP
                    </span>
                </span>

            </div>

CSS code: ：

#footer {
            background-color: #125e9a;
            bottom: 0;
            height: 5%;
            position: absolute;
            width: 100%;
        }  
#logout1 {
        display: block;
        height: 100%;
        margin-left: 3%;
        padding: 2.5%;
        width: 30%;
    }
    #logoutIcon1 {
        background-image: url("../JunosImages/mob/back-arrow_normal_tab.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: block;
        float: left;
        height: 14px;
        margin-top: 2%;
        width: 10px;
    }
    #logoutText1 {
        color: #fff;
        float: left;
        font-size: 14px;
        font-weight: 600;
        margin-left: 7%;
    }

Answer 1

你向右拉两个按钮。只需在第二个按钮中将pull-left类替换为price_screen_tab_name，然后交换这些按钮。

don’t use ID selectors in CSS。

Answer 2

你使用bootstrap所以请检查下面的... 类=＆＃34;上拉左＆＃34 ;;

Answer 3

我会这样做：

{{1}}

总是更好地在类中编写样式而不是id
使用＆＃34; =＆＃34;在没有空格的属性中
班级和ids的名称必须解释你的工作（一种评论方式）
在你的代码中缺少其他样式，看看你在本地浏览器中做了什么

Div元素不向左浮动

3 个答案: