css - 我如何制作::在填充高度之前？

我有以下 HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="brokencss.css">
</head>
<body>
    <div class="datapoint">
    <span class="label">
        This is a test.
        </span>
    </div>
</body>
</html>

和 CSS:

body {
    background-color: rgb(0,30,60);
    margin-left:40px;
    margin-right:40px;
    margin-top:20px;
    color: rgb(250,240,250);
    font-family: 'Verdana';
    font-size: 35px;
}

.datapoint::before {
    content: ">>";
    background-color:black;
    color: white;
    height:100%;
}

.datapoint {
    margin-top: 15px;
    max-width: 20em;
    background-color: red;
    height:100%;
}

.label {
    font-family:'Courier New';
    font-size:60px;
}

呈现为:http://imgur.com/0oVTuGw

我希望带有“>>”的黑色::before block 填充 .datapoint div 的高度，但我找不到执行此操作的方法。我已将两者的高度都设置为 100%，所以我有点困惑为什么这不起作用。

最佳答案

我找到了比我提供的更好的解决方案:

我将 ::before 和 label 元素显示为 inline-block。
我将 label 元素的 line-height 设置为 font-size。
我将 ::before 元素的 line-height 设置为相同的值。
添加 vertical-align: top; 到 ::before 元素。

body {
    background-color: rgb(0,30,60);
    margin-left:40px;
    margin-right:40px;
    margin-top:20px;
    color: rgb(250,240,250);
    font-family: 'Verdana';
    font-size: 35px;
}

.datapoint::before {
    content: ">>";
    background-color:black;
    color: white;
    font-size: 35px;
    display: inline-block;
    line-height: 60px;
    vertical-align: top;
}

.datapoint {
    margin-top: 15px;
    background-color: red;
    max-width: 20em;
    white-space: nowrap;
}

.label {
    font-family:'Courier New';
    font-size: 60px;
    line-height: 60px;
    display: inline-block;
    margin-left: 15px;
}

<div class="datapoint">
        <span class="label">
            This is a test.
        </span>
    </div>

关于css - 我如何制作::在填充高度之前？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31361600/

css - 我如何制作::在填充高度之前？

上一篇：JavaScript SpellCheck 覆盖了我的 css 设计

下一篇：javascript - 在页面加载时淡入 div