Question

我希望显示“情感分析”，使得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;
}

Live code in CodePan

Answer 1

这是一个混乱的代码。如果你只想把第一个字母写成Bigger，你可以试试以下内容。

<强> Working Demo

<强> HTML

<div>Sentiment analysis</div>

<强> CSS

div:first-letter {
  font-size:30px;
  font-weight:bold;
}

Answer 2

您正尝试在同一行中对齐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伪，这样可以为您节省一个元素。

Demo

注意：我在这里使用通用元素选择器，请确保使用a <{1}}或class唯一地定位该元素。

Answer 3

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>

enter image description here

Answer 4

<h1>Hello</h1>
<h1>World</h1>

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

demo

Answer 5

<style type="text/css">
      .style1
    {
        font-size: 36px;
    }
</style>
</head>
<body>
<p>
   <span class="style1">S</span>entiment</p>
</body>

Answer 6

将display:inline添加到h1＆amp; h5，然后从margin-left

删除 h5

<强> DEMO HERE >>

试试这个

 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;
   }

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

使用css </h5>显示<h1> </h1> <h5>内联文本

6 个答案: