Question

所以我被页脚挫败了。在这个早期阶段，我试图让我的所有页脚沿着页面底部移动，但我没有运气（请参阅本文底部的HTML代码）。

要在页面的顶部和底部制作导航栏，我的CSS看起来像这样：

.header {
  height: 30px;
}
.footer {
  height: 30px;
  position: absolute;
  bottom: 0;
}
body {
  height: 100%;
  margin-bottom: 30px;
}

我的ul有这个CSS，认为它们会排在页面底部：

.posRight li{
  display: inline;
  float: right;
}

.posLeft li {
  float: left;
  display: inline;
}

但由于某种原因，第二个ul（类posRight）在我的拳头ul下面，我似乎无法移动它，除非我将位置设置为绝对位置然后手动移动它在凌乱的地方至少。

我注意到的另一件事是我的标题导航栏，如果我将float: right;添加到header类而不是posRight类，那么它也具有右侧类别我的中心形象（班级imgP）跳到一边而不是留在中间？

它由以下CSS集中：

.imgP {
 height: 231px; //specifying the class here works over specifying it on .logo which stretches it height ways 
}

.logo {
  width: 269px;
  display: block;
  margin: 0 auto;
  padding-top: 112px;
}

这是HTML的其余部分，如果它有帮助：

 <body>

    <!-- top navBar -->
  <div class="inLine posRight header">
    <ul>
      <li><a href="#">Images</a></li>
      <li><a href="https://mail.google.com/mail/u/0/#inbox">Gmail</a></li>
      <li>Anna</li>
    </ul>
  </div>

  <!-- main content: search bar and google button -->
  <div id="content" class="mainContent">

    <div class="imgP">
        <img class="logo" src="images/logo11w.png" alt="logo">
    </div>

     <form action="#">
       <input class="txtBox" type="text" />
       <div class="centreB"> 

            <input class="butt" type="submit" name="Google Search" value="Google Search" />

            <input class="choose" type="submit" name="Google Search" value="I'm Feeling Lucky" />
       </div>
     </form>
  </div>



  <!-- footer navBar -->
  <div class="footer">
   <ul class="posLeft">
     <li><a href="#">Advertising</a></li>
     <li><a href="#">Busniness</a></li>
     <li><a href="#">About</a></li>
   </ul>

   <ul class="posRight">
     <li><a href="#">Privacy</a></li>
     <li><a href="#">Terms</a></li>
     <li><a href="#">Settings</a></li> 
   </ul>

</body>

我很抱歉，如果这个问题变得太长，但这两个事情联系在一起，所以我觉得做两个帖子是不值得的。

Answer 1

footer ** class如下，我想我会为你工作

＆＃13;

.footer {   
        position: fixed;  //updated
    bottom: 0;
    background: #f2f2f2;
    border-top: 1px solid #e4e4e4;
    line-height: 40px;
      min-width: 100%; //updated
      width: auto; //updated
}

＆＃13;

这是工作js提炼你的解决方案

Updated DEMO jsfiddle

Answer 2

您想在哪里放置图片和表单。这可能会对你有帮助。

HTML代码

<body>  
<!-- top navBar -->
<div class="posRyt">
<ul>
      <li><a href="#">Images</a></li>
      <li><a href="https://mail.google.com/mail/u/0/#inbox">Gmail</a></li>
      <li>Anna</li>
    </ul>
</div>


<!-- main content: search bar and google button -->
<div id="content" class="mainContent">
    <div class="imgP">
        <img class="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" alt="logo">
    </div>
        <div class="iform">
            <form action="#">
                <input class="txtBox" type="text" />
                    <div class="centreB"> 
                    <input class="butt" type="submit" name="Google Search" value="Google Search" />
                    <input class="choose" type="submit" name="Google Search" value="I'm Feeling Lucky" />
                    </div>
            </form>
        </div>
</div>

<!-- footer navBar -->
    <div class="footer">
    <ul class="posLeft">
         <li><a href="#">Advertising</a></li>
         <li><a href="#">Busniness</a></li>
         <li><a href="#">About</a></li>
       </ul>

       <ul class="posRight">
         <li><a href="#">Privacy</a></li>
         <li><a href="#">Terms</a></li>
         <li><a href="#">Settings</a></li> 
       </ul>
    </div>

</body>

CSS

.posRyt{
    text-align:center;
    padding:5px;
}
.posRyt li{
display:inline-block;
}
#content {
    width: 100%;
    float: left;
    padding: 10px;
    display: inline-flex;
}
.footer {

    clear:both;
    text-align:center;
    padding:5px; 
}
.footer li {
    list-style-type: none;
    display: inline-block;
}
ul.posRight {
    float: right;
}
ul.posLeft {
    float: left;
}
.iform {
    text-align: center;
    padding-top: 28px;
}
.imgP{
width:50%;
text-align:center;
}

对齐预览检查Fiddle

页脚栏未正确格式化

2 个答案: