Showing text inline using css

问题

I want to show "Sentiment analysis" such that S should be much larger then h5 text.

What's wrong with follwing code:

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

回答1:

That's a messy code. If you just want to make the first letter Bigger, You can try the following.

Working Demo

HTML

<div>Sentiment analysis</div>

CSS

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

回答2:

You are trying to align 2 block level elements in the same line, so either you need to make them inline or inline-block by using display: inline; or display: inline-block(recommended) or use <span> element inside your h1 like

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

And than you can target the H using

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

If you are looking to target only the first letter, it is better, if you use :first-letter pseudo, which will save you an element as well.

Demo

Note: I am using general element selectors here, make sure you use a class or an id to target the element uniquely.

回答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>

回答4:

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

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

demo

回答5:

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

回答6:

Add display:inline to both h1 & h5, Then remove margin-left from h5

DEMO HERE >>

Try this

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

Your way to implement this seems little complex, even if you want to go with your code you can use my answer, otherwise select any of the simple method in other answers here.

来源：https://stackoverflow.com/questions/20784672/showing-h1-h5-text-inline-using-css

标签

html