【问题标题】:How do I fit text into footer margins如何将文本放入页脚边距
【发布时间】:2013-02-24 17:58:30
【问题描述】:

我知道这对你们大多数人来说可能非常简单,但它让我很头疼。我正在使用 Dreamweaver CS6 来编辑我从免费网站模板下载的模板来构建我的企业网站。我遇到的问题是我无法将页脚右侧的链接放入页脚。我不确定这是 HTML 问题还是 CSS 问题。这是我所说的一个例子:

左边距............右边距

首页...关于...画廊...联系人

似乎有多少链接并不重要,最后一个悬垂在页脚上。我很感激你能给我的任何帮助。谢谢。

http://tinypic.com/r/2nvcljq/6

Fiddle

#footer ul.navigation {
float: right;
display: inline-block;
line-height: 24px;
list-style: none;
margin: 0;
padding: 0;
}
#footer ul.navigation li {
float: left;
margin-left: 15px;
}
#footer ul.navigation li:first-child {
margin-left: 0;
}
#footer ul.navigation li a {
color: #ab7d0f;
font: 11px/24px "Oswald";
text-decoration: none;
text-transform: uppercase;
}
#footer ul.navigation li a:hover {
color: #241b18;
}
#footer #footnote {
color: #ab7d0f;
font: 11px/24px "Oswald";
margin: 0;
text-transform: uppercase;
}


<div id="footer">
    <div>
      <div id="links">
        <div class="showroom">

              <p>4885 Wilson Street<br> Victorville, CA 92392<br><br> 702-409-5373<br>
                <br> 
                  <a href="index.html">info@briarpatchfurniture.com</a>
          </p>
          </div>

        <ul class="navigation">
            <li><a href="index.html">Home</a>
                <a href="about.html">About</a><a href="gallery.html"> Gallery</a>
              <a href="contact.html">Contact</a>
            </li>
        </ul>
        <p id="footnote">
            © Copyright TIBISI, Inc 2013. All Rights Reserved.
      </p>
    </div>
</div>

【问题讨论】:

  • 我不知道如何添加屏幕截图。
  • 我在 chrome 中看到它运行良好。您在哪个浏览器中看到此行为?
  • 有没有办法给我添加截图?
  • 在我看来,它在 firefox、chrome 和 explorer 上看起来都一样。 tinypic.com/r/2nvcljq/6

标签: html css margin footer


【解决方案1】:

我建议用这个替换当前的#footer ul.navigation 规则

#footer ul.navigation {
    float: right;
    display: block;
    line-height: 24px;
    list-style: none;
    margin: 0;
    padding: 0 10px 0 0;
}

Fiddle 和您页面的页脚看起来不一样。

【讨论】:

  • 解决了!非常非常感谢!!
  • 不客气。但是修复Tieson T. 提到的内容,当然接受答案...
【解决方案2】:

这对我来说看起来不正确:

<ul class="navigation">
    <li><a href="index.html">Home</a>
        <a href="about.html">About</a><a href="gallery.html"> Gallery</a>
        <a href="contact.html">Contact</a>
    </li>
</ul>

我假设如果打算使用一个列表,标记应该如下所示:

<ul class="navigation">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a><a href="gallery.html"> Gallery</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

【讨论】:

  • 也谢谢你!我不知道为什么会这样,但我改变了它。
  • @user2150599 您评论了 Branislav 的回答,认为他的建议有效。如果它确实解决了问题,您可能应该将他标记为答案。无论如何,欢迎你。
  • 是的,我也注意到了。感谢您的公平竞争。
猜你喜欢
  • 2022-10-05
  • 2016-06-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-08-05
  • 2014-02-10
  • 1970-01-01
相关资源
最近更新 更多