页脚正确对齐

时间:2013-09-05 04:38:10

标签: html css twitter-bootstrap-3

   <div id="footer">
    <div class="row">
        <div class="span5">
            <img src="../goyal/webdesign.jpg" class="verisign-image"></div> 
                I am a  
                <select style="width:10%;" class="dropup">
                      <option value="select">--select--</option>
                      <option value="Business">Business</option>
                      <option value="Indivisual">Indivisual</option>
                </select>

                <button class="btn dropdown-toggle btn-Warning" style="margin-top:-1%;">Go!
                </button>   

                <div class="span5" style="float:right;">
                <div class="footer-feedback">
                    <p class="left">Add & claim your business link|
                        <a href="">link1</a>|
                        <a href="">link2</a>
                    </p>
                    <span class="footer-feedback">
                        <h5>Feedback</h5>
                    </span>
                </div>
            </div><!--span5 --> 
        </div><!--span5 -->
    </div><!-- row -->
</div>

的CSS:

div#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#eee;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
span.footer-feedback{

color:#fff;
float:right;
width:80px;
height:100%;
background:green;
}
 p.left {
    text-align:left;
    float:left;
}

 p.right {

    float:right;
    text-align:right;
}

我想要在页脚中正确对齐。 喜欢在绿地中间的反馈。 和绿色的左侧是我想要这个文字“添加&amp;声称您的业务链接| link2 | link3” 在中间“我是一个,选择并去” 去橙色的按钮。 我的页脚是固定的

2 个答案:

答案 0 :(得分:1)

以下是fiddle link

<强> HTML

<div id="footer">
        <div class="row">
            <div class="span5"><img src="../goyal/webdesign.jpg" class="verisign-image"></div> 
            <div class="orange">
                I am a  
                <select class="dropup">
                    <option value="select">--select--</option>
                    <option value="Business">Business</option>
                    <option value="Indivisual">Indivisual</option>
                </select>

                <button class="btn dropdown-toggle btn-Warning" style="margin-top:-1%;">Go!</button>   
            </div> 
            <p class="left">Add & claim your business link|
                <a href="">link1</a>|
                <a href="">link2</a>
            </p>
            <div class="span5" style="float:right;">
                <div class="footer-feedback">

                    <span class="footer-feedback">
                        <h5>Feedback</h5>
                    </span>
                </div>
            </div><!--span5 --> 
        </div><!--span5 -->
    </div>

<强> CSS

div#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   /*height:30px;*/
   width:100%;
   background:#eee;
   text-align:center;
   padding:5px 0;
}
select.dropup {
    width:200px;
    }
/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
span.footer-feedback{
color:#fff;
float:right;
width:80px;
height:100%;
background:green;
text-align:center;
}
 p.left {
    display:inline-block;
}

 p.right {

    float:right;
    text-align:right;
}
.orange {
    /*background-color:#ff9a2e;
    overflow:hidden;
    height:100%;*/
    float:left;
    width:auto;
    }

答案 1 :(得分:0)

只需替换你的Css这个Css

div#footer {
   position: fixed;
    left: 0px;
    bottom: 0px;
    /*height: 30px;*/
    width: 100%;
    background: #eee;
}

只需删除&#39; dif#footer&#39;标签