Making spans inside of figures displayed in one line-CodePudding

I want the following 3 figures to get displayed all in one line:

.hero.sec{
  display: inline;
}

<center>
   <div  id="abt">
  <div >
     <be>
     <h1 style="color: black; margin-bottom: 0; border-bottom: 5px solid black; border-radius: 5px; width: 7%; margin-left: 0;"><b>About</b></h1>
     <p style="color:black">Lorem Ipasum</p>
     <center>
        <div >
           <h2>
              <figure>
                 <span  data-val="650">000</span>
           </h2>
           <figcaption>Lines of Code</figcaption></figure>
           <h2>
              <figure>
                 <span  data-val="50">000</span>
           </h2>
           <figcaption>Scam Servers detected</figcaption></figure>
           <figure>
              <h2><span  data-val="10"></span></h2>
              <figcaption>Legit Servers listed</figcaption>
           </figure>
        </div>
     </center>
  </div>
   </div>
</center>

However, I still get a new line for every single figure. Can someone help me?

CodePudding user response：

You should organize your tags first, Also Multi classes in HTML must be separated by space not '.', The following code will display figures in the same line as you requested:

<center>
   <div  id="abt">
      <div >
         <br>
         <h1 style="color: black; margin-bottom: 0; border-bottom: 5px solid black; border-radius: 5px; width: 7%; margin-left: 0;"><b>About</b></h1>
         <p style="color:black">Lorem Ipasum</p>
         <div >
            <figure>
               <h2>
                  <span  data-val="650">000</span>
               </h2>
               <figcaption>Lines of Code</figcaption>
            </figure>
            <figure>
               <h2>
                  <span  data-val="50">000</span>
               </h2>
               <figcaption>Scam Servers detected</figcaption>
            </figure>
            <figure>
               <h2><span  data-val="10"></span></h2>
               <figcaption>Legit Servers listed</figcaption>
            </figure>
         </div>
      </div>
   </div>
</center>

Css :

figure {
             display: inline-block;
        }

CodePudding user response：

Firstly you messed up your <figure> start tag, you have put it after h2 insted in front of, and for displaying inline use this under:

figure {
  display: inline-block;
}

<center><div  id="abt">
    <div >
      <br><h1 style="color: black; margin-bottom: 0; border-bottom: 5px solid black; border-radius: 5px; width: 7%; margin-left: 0;"><b>About</b></h1>
      <p style="color:black">Lorem Ipasum</p>
      <center><div >
        <figure><h2><span  data-val="650">000</span></h2><figcaption>Lines of Code</figcaption></figure>
       <figure><h2><span  data-val="50">000</span></h2><figcaption>Scam Servers detected</figcaption></figure>
        <figure><h2><span  data-val="10"></span></h2><figcaption>Legit Servers listed</figcaption></figure>
      </div></center>
    </div>
  </div></center>

CodePudding user response：

Your class name is wrong for css. Don't use .(dot) in classname. Default _(underscore) is using.