5

我想展示“情绪分析”，这样 S 应该比h5文本大得多。

以下代码有什么问题：

HTML：

<h1>S</h1> <h5>entiment Analysis</h5>

CSS：

h1 {
    margin-left: 36%;
    color:#C0C0C0;
    font-family: "calibri";
    text-decoration:underline;
    white-space: pre;
}

h5 {
    margin-left: 36%;
    color:#C0C0C0;
    font-family: "calibri";
    text-decoration:underline;
    white-space: pre;
}

CodePan 中的实时代码

4

6 回答 6

6

这是一个混乱的代码。如果你只是想让第一个字母更大，你可以试试下面的方法。

工作演示

HTML

<div>Sentiment analysis</div>

CSS

div:first-letter {
  font-size:30px;
  font-weight:bold;
}
于 2013-12-26T12:23:18.510 回答
3

您正在尝试在同一行中对齐 2 个块级元素，因此您需要制作它们inline或inline-block使用display: inline;或display: inline-block（推荐）或使用<span>您h1喜欢的元素

<h1><span>H</span>ello</h1>

而不是你可以针对H使用

h1 > span {
   font-size: 54px;
}

如果您只想定位第一个字母，最好使用:first-letter伪，这也会为您节省一个元素。

演示

注意：我在这里使用通用元素选择器，请确保您使用 a class或 anid来唯一地定位元素。

于 2013-12-26T12:19:14.760 回答
2 
Use this css rules for proper follow the css rules to render the requirement!


  <style>
  h1:first-line {
            margin-left: 36%;
            color:#C0C0C0;
            font-family: "calibri";
            font-size:1em;
            text-decoration:underline;
            white-space: pre;
            display:inline;
                }
   h1:first-letter{
            margin-left: 36%;
            color:#C0C0C0;
            font-family: "calibri";
            font-size:2em;
            text-decoration:underline;
            white-space: pre;
            display:inline;
                }
  </style>

在此处输入图像描述

于 2013-12-26T14:44:05.963 回答
1 
<h1>Hello</h1>
<h1>World</h1>

h1:first-letter {
    font-size: 60px;
}

演示

于 2013-12-26T12:34:09.397 回答
0 
<style type="text/css">
      .style1
    {
        font-size: 36px;
    }
</style>
</head>
<body>
<p>
   <span class="style1">S</span>entiment</p>
</body>
于 2013-12-26T12:18:53.057 回答
0

添加display:inline到h1& ，h5然后从 margin-lefth5

在这里演示 >>

尝试这个

 h1
   {
         margin-left: 36%;
         color:#C0C0C0;
         font-family: "calibri";
         text-decoration:underline;
         white-space: pre;
         display:inline;
  }


h5
   {
        color:#C0C0C0;
        font-family: "calibri";
        text-decoration:underline;
        white-space: pre;
        display:inline;
   }

您实现此功能的方法似乎并不复杂，即使您想使用您的代码也可以使用我的答案，否则在此处选择其他答案中的任何简单方法。

于 2013-12-26T12:19:53.607 回答