title: html - Why my three buttons are vertical instead of horizontal?
body: <p>Sorry for the confusing I caused. I did not paste my code because it is part of my big assignment. Also, I do not sure what parts of code cause the problem. So I paste the parts of the code that contains these three buttons </p>
  
  <p>I want to make these three button display horizontally( Which I think is default). However, the website shows them vertically. Could anyone tell me the reason behind it? what should I do to make them horizontally. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;/div&gt;
  
  &lt;div id="Comparing Energy" class="tab"&gt;
  &lt;h3 style="color:darkblue;"&gt; Units for comparing energy (Gasoline and Enthanol) &lt;/h3&gt;
  &lt;p class="Sansserif"&gt;BTU stands for British Thermal Unit, which is a unit of energy consumed by or delivered to a building. A BTU is defined as the amount of energy required to increase the temperature of 1 pound of water by 1 degree Fahrenheit, at normal atmospheric pressure. Energy consumption is expressed in BTU to allow for consumption comparisons among fuels that are measured in different units. [think-energy.net]&lt;/p&gt;
  
  &lt;pre class="Sansserif"&gt;&lt;span style="font-family:sans-serif;"&gt;Below are some BTU content of common energy units:
       1 gallon of heating oil = 138,500 BTU
       1 cubic foot of natural gas = 1,032 BTU
       1 gallon of propane = 91,333 BTU
  &lt;/span&gt;&lt;/pre&gt;
  
  &lt;p class="Sansserif"&gt;&lt;b&gt;Let's compare the different energy amount between burn gasoline and ethanol&lt;/b&gt;&lt;/p&gt;
  
  
  &lt;button onclick="expandable()"&gt;&lt;b&gt;Calculate&lt;/b&gt;&lt;/button&gt;
  
  &lt;p id="inputinfo" class="Sansserif" style="display:none"&gt; By entering the amount of gasoline, this program will perform the appropriate calculations and display the equivalent amount of energy it produces in BTU. Please input a number: &lt;/p&gt;
  
  &lt;input id="btu" style="display:none" onkeyup="myDefault()"&gt;
  &lt;button id="energybutton" onclick="energy()" style="display:none;"&gt;&lt;b&gt;Submit&lt;/b&gt;&lt;/button&gt;
  &lt;button id="wizardbutton" onclick="wizard()" style="display:none;"&gt;&lt;b&gt;Wizard&lt;/b&gt;&lt;/button&gt;
  &lt;button id="slidebutton" onclick="simple()" style="display: none;"&gt;&lt;b&gt;Simple&lt;/b&gt;&lt;/button&gt;
  
  &lt;p id="numb2" style="display:none"&gt;
  &lt;input type=radio name=myradio onclick=document.getElementById("btu").value=1&gt;Small&lt;br&gt;
  &lt;input type=radio name=myradio onclick=document.getElementById("btu").value=4&gt;Medium&lt;br&gt;
  &lt;input type=radio name=myradio onclick=document.getElementById("btu").value=6&gt;Large&lt;br&gt;
  &lt;/p&gt;
  
  &lt;p id="BTU"&gt;&lt;/p&gt;
  &lt;p id="defaultValue"&gt;&lt;/p&gt;
  
  &lt;script&gt;
  
  function energy() {
      var x, text;
  
      // Get the value of the input field with id="numb"
      x = document.getElementById('btu').value;
  
      j = x * 115000
      t = x*76700
      text = " "+x+" gallon of gas produces "+j+" BTU "+x+" gallon of ethanol produces "+t+" BTU";
      document.getElementById("BTU").innerHTML = text;
  }
  
  function myDefault() {
     var x = document.getElementById('btu').value;
  
      if (x &lt;= 10)
          document.getElementById("defaultValue").innerHTML = "A typical small one is 5";
      else if ((x &gt; 10) &amp;&amp; (x &lt;= 20))
          document.getElementById("defaultValue").innerHTML = "A typical medium one is 15";
      else if (x &gt; 20)
          document.getElementById("defaultValue").innerHTML = "A typical large one is 25";
      else 
          document.getElementById("defaultValue").innerHTML = " ";  
  }
  
  function wizard() {
      var v = prompt("By entering the amount of gasoline, this program will perform the appropriate calculations and display the equivalent amount of energy it produces in BTU. Please input a number: ");
  
      if (v != null) {
          document.getElementById('btu').value=v;
      }
  }
  
  
  function simple() {
      document.getElementById('btu').style.display='none';
      document.getElementById('numb2').style.display='block';
  }
  
  function expandable() {
      document.getElementById('inputinfo').style.display='block';
      document.getElementById('btu').style.display='block';
      document.getElementById('energybutton').style.display='block';
      document.getElementById('wizardbutton').style.display='block';
      document.getElementById('slidebutton').style.display='block';
  
  }
  
  &lt;/script&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>