title: How do I align my label to the left of my text input box with CSS?
body: <p>I'm new to all of this so I have a question and it's probably silly but here we go anyway. </p>
  
  <p>I have this HTML for a form but I need to use CSS to align my labels to the left of the text box and <em>not</em> have it sit on top. I don't know what CSS to use in order to do this. </p>
  
  <pre><code>&lt;form action="process.php"&gt;
      &lt;h1&gt;Registration&lt;/h1&gt;
      &lt;ol&gt;
          &lt;li&gt;
              &lt;label for="name"&gt;Name:&lt;/label&gt;
  &lt;input type&gt;"text" id="name" name="name"&gt;
          &lt;/li&gt;
      &lt;/ol&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>There are three more "labels" like this in my <code>ol</code> but I don't feel like typing them all out.</p>
  
  <p>I need the labels to the left aligned with my text boxes.</p>
  
  <p>I have tried:</p>
  
  <pre><code>label{display:inline-block}
  </code></pre>
  
  <p>And:</p>
  
  <pre><code>label ol{display:inline-block}
  </code></pre>
  
  <p>I've tried giving floats, the text book (yes this is for a college class) says to do this:</p>
  
  <pre><code>.label{
      display:inline-block;
  }
  </code></pre>
  
  <p>But <em>that</em> doesn't seem to work either. Please tell me how on earth I can do this. </p>
  
  <p>Here is my exact CSS so far:</p>
  
  <pre><code>h1{font-family:Oregano;}
  
  form{margin-bottom:1em;}
  
  form ol{list-style-type:none;}
  
  form li{width:100px;
  border:1px solid black;
  text-align:right;
  background-color:black;
  color:white;
  margin:20px;
  height:20px;
  white-space:5px;}
  </code></pre>
  
  <p>It looks exactly like it should, I just have an issue with the alignment of the labels. Have I mentioned how much I hate this crap? I'm changing my major! (not really... but still)</p>