3

我对前端开发和无语义都是新手。我试图让两种不同的字体大小坐在同一行。但传统方法似乎不起作用。我试过垂直对齐：“底部；” 但这并没有削减它。 这就是它目前的样子 我很抱歉我不能用 jsfiddle 给你看，使用非语义意味着它没有正确显示

 10 <body class="grid-container">
 11 <header>
 12
 13   <div class ="grid-100 align-center">
 14   <div class="grid-30">
 15     <div id="name"><a href="http//nadiavu.com">Nadia</a></div> 
 16   </div>
 17   <div class="grid-30">
 18     <div id="about"><a href="about">About</a></div>
 19   </div>
 20   <div class="grid-20 suffix-20">
 21    <div id="contactpage"><a href="contacpage">Contact</a></div>
 22 </div>
 23 </div>

这是CSS

 27 #name{
 28      color: #A0909D;
 29      font-size: 2.2em ;
 30      font-family: Palatino;
 31      float: right;
 32  }
 33
 56 #about{
 57     font-family: Palatino;
 58     font-size: 1.2em;
 59     float: right;
 60
 61
 62 }
 63
 64 #contactpage{
 65       font-family: Palatino;
 66       font-size: 1.2em;
 67       float: right;
 68
 69  }
4

3 回答 3

2

您可以只允许文本表现为正常的内联样式，例如Demo。

这是CSS：

.big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

问题是由浮动它们引起的。

或者你可以做这样的事情，

CSS：

.parent {
    vertical-align: bottom;
}

.parent span {
    display: inline-block;
    width: 200px;
    height: 50px;
}

.big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

最后，提琴：Demo

或者！！你可以去这个选项，

CSS：

.parent {
    display: table;
    vertical-align: bottom;
    width: 100%;
}

.parent span {
    display: table-cell;
    width: 33%;
    height: 50px;
}

.big {
    font-size: 20px;
}

.small {
    font-size: 10px;
}

另一个小提琴，Demo

于 2014-02-22T01:52:01.410 回答
1

没有为此创建垂直对齐。改用line-height属性：

<!DOCTYPE html>
<html>
<head>
<style>
body {font-size: 16px;}
p {float: left; margin: 5px; }
p.big {font-size: 200%; line-height:35%;}
</style>
</head>

<body>
<p>
This
</p>

<p class="big">
This
</p>

<p>
This
</p>

</body>
</html>
于 2014-02-22T02:00:10.950 回答
0 
<P style="color: white;font-size: 2.2em" class="w3-center"><span style="font-
size: 1.2em">Nadia</span>About<span style="font-size: 1.2em">Contact</span>
</P>

这就是如何在同一行上获得不同大小的文本

于 2017-10-28T15:32:08.707 回答