Question

我启动了一个新的Web应用程序项目，我有一个像这样的HTML代码：

HTML：

<footer>
    <section class="left">
        <h1>Copyright</h1>
        <span> Kleber Mota de Oliveira</span>
    </section>

    <section class="right">
        <h1>website</h1>
        <a href="http://klebermota.eti.br"> klebermota.eti.br</a>
    </section>
</footer>

的CSS：

section {
  display: inline;
}

.right {
  position: absolute;
  right: 5px;
  width: 50%;
  text-align: right;
}

.left {
  position: absolute;
  left: 5px;
  width: 50%;
  text-align: left;
}

完整代码：http://jsfiddle.net/klebermo/ee2nx7vc/

每个部分都放在屏幕的一侧;但正在修剪右侧的文字。在标题中，文字未按照正确的方式对齐。

任何人都可以提示如何解决这个问题？

Answer 1

尝试更改您的CSS

.right{
position:fixed; right: 7px;`}

和

.left{position:fixed; left: 7px;}

在jsfiddle上它似乎正在工作;）

Answer 2

设置正确的line-height将有效。现在我使用以下方法重置它：

* {line-height: 1;}

它显示得很好：

小提琴：http://output.jsbin.com/qezuzanajo

Answer 3

section {
    display: inline;
    height: 100%;
}

header section ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    width: 100%;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Sigmar One",cursive;
    display: inline;
    padding: 0;
    margin: 0;
    height: 100%;
    line-height: 2;
}

修复css中文本对齐的页眉/页脚部分

3 个答案: