Question

我正在为我的战队制作一个“星际争霸II”网站。我希望导航栏包含文本“ALLOYE”并粘贴到导航栏的底部。我试过这段代码：

vertical-align:text-bottom;

但是文字似乎说底部大约有10个像素。是因为某些隐藏的边界还是某种东西？这是我的HTML代码总数：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="nav">
            <div class="title">
                <strong>ALLOYE</strong>
            </div>
     </div>
</body>
</html>

这是CSS代码：

body{
    margin: 0; padding: 0;
    color: #fff;
    font-family: "Segoe UI",Arial,Sans-Serif;
}
.nav{
    position: absolute;
    width: 100%;
    height: 7%;
    background: -webkit-linear-gradient(#FFB441, #FF9A00);
    background: -o-linear-gradient(#FFB441, #FF9A00);
    background: -moz-linear-gradient(#FFB441, #FF9A00);
    background: linear-gradient(#FFB441, #FF9A00);
}
.title{
    position: relative;
    vertical-align:text-bottom;
    font-size: 65px;
 }

Answer 1

如果您在两个班级上临时设置边框，您将看到发生了什么。

一旦看到，请尝试将7％的高度放在.title上。

然后执行以下操作以查看会发生什么：

将浏览器窗口的高度更改为非常短的高度。
查看不同的浏览器（IE，Chrome，Firefox等）
在手机上查看
在浏览器中按F12并进行实验

祝你好运。

Answer 2

你想要这样的东西：

.nav{
    position: relative;
    width: 100%;
    height: 80px;
    background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
.title{
    position: absolute;        
    font-size: 65px; /* This large a font has significant whitespace at the bottom */
    bottom: -15px; /* Compensate for font whitespace. Tweak to fit your font /*
}

但除此之外，正如拉斯金在答案中建议的那样，你可能想在导航上设置一个固定的高度。

Answer 3

.nav高度（7％）可能导致重叠。如果您将其设置为px而不是%，则应该可以强制将“ALLOYE”强制设置在条形下方。

如下所示：

.nav
{
position: absolute;
width: 100%;
height: 15px;
background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}

Answer 4

首先，我认为你需要一个reset，因为我没有看到我的jsfiddle中的空格而你的代码没有变化（http://jsfiddle.net/R6dTU/）。

然后我实际上在这里遵循不同的方法。我绝对会将标题定位为

.title{
   position: absolute;
   bottom: 0;
}

除非您不介意在屏幕上裁剪文字，否则我建议不要使用没有最小高度的百分比高度。

另外，请记住vertical-align: text-bottom;将文本对齐到下方的底部（例如，小写p和q的尾部），所以你不会得到你正在寻找的效果这个。绝对位置更可靠。

Per @ ANeves的评论，重置不是这里的“最佳实践”解决方案，但它可能是一个快速修复。

是适当的解决方案

为标题文字使用正确的标记。 divs仅适用于无法分类的元素。我在这里建议使用h1标签
在此标记上设置边距和填充，并设置行高，否则可能会在浏览器之间发生变化（这是重置的快速修复）

Answer 5

在包含绝对定位属性的元素上使用底部CSS属性（在本例中，它是.nav）。将bottom属性的属性设置为0％。你的CSS应该是这样的：

.nav{position: absolute;bottom:0px;}

Answer 6

从height: 7%;移除.nav并将其添加到.title：
（更新的CSS）：

body{
margin: 0; padding: 0;
color: #fff;
font-family: "Segoe UI",Arial,Sans-Serif;
}
.nav{
position: absolute;
width: 100%;
background: linear-gradient(#FFB441, #FFAC2F, #FF9A00);
}
.title{
position: relative;
vertical-align:text-bottom;
font-size: 65px;
height: 7%;
}

小提琴： http://jsfiddle.net/Wae6n/3/

HTML＆amp; CSS - 文本粘贴到div的底部？

6 个答案: