0

我是一名新的 ASP.NET 开发人员，这是我第一次使用 CSS 文件。我有一个简单的 CSS 文件，我正在努力处理页脚部分。页脚如下所示：

在此处输入图像描述

我需要以这种方式修改它：

  1. 这将是文本和边框之间的一点空间
  2. 另外，我不知道如何使中间的文本居中。我正在使用浮动，但它仍然显示这样。
  3. 我需要固定页脚宽度，因为有时页脚的边框会超出身体的边框。

这是我的CSS代码：

.footer
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    vertical-align: bottom;
    text-align: center;
    float: left;
    width: 1250px;
    border-bottom: 2px solid grey;
    border-right: 2px solid grey;
    border-left: 2px solid grey;
}

.footer p.left {
    text-align:left;
    float:left;
}

.footer p.right {
    float:right;
    text-align:right;
}

.footer p.centered {
    text-align:center;
}

这是我的 ASP.NET 代码：

<div class="footer">
             <p class="left">
                 Copyright For MyCompany <%= DateTime.Now.Year.ToString() %>. All Rights Reserved
             </p>
             <p class="right">
                 Developed by <strong>IBM/STAD/PSD</strong>
             </p>
                           <p class="centered">
                Last update: 10/23/2013 02:42 PM 
                <br />
                 For any issue/comments Contact <a href="mailto:Test">
                    The Administrator (Test)</a>
              </p>   

          </div>

你能帮我解决这两个问题吗？

提前致谢。

4

2 回答 2

1
  1. 向页脚添加填充，例如padding:10px;
  2. 将边距设置为margin:0 auto;onp.centered而不是浮动它
  3. 将页脚设置为固定，添加：position:fixed; left:0px; bottom:0px;到您的页脚。

我还使用了box-sizing属性，这样您就可以将页脚的宽度设置为屏幕宽度的 100%，而不会丢失边框。

演示：http: //jsfiddle.net/W5sUS/3/

于 2013-11-11T16:07:02.777 回答
0

有很多方法可以去这里，我是这样做的：（它在任何长度的输入上都表现良好，尽管我不确定当右块或左块变得太大时你想要发生什么。）

.footer p.left { text-align: left; float: left; margin-left: 10px; }
.footer p.right { float: right; text-align: right; margin-right: 10px; }
.footer p.centered { text-align: center; clear:both; position: relative; top: -12px; }
于 2013-11-11T16:22:49.990 回答