How to align text boxs in one line

Question

I want to know how can I align three text box in a row in the same line. Here is some example code, if you could modify it to help me that would great!

相关标签:

Answer 1

Simply add bootstrap

Note: view the result in full screen

.row {
  display: inline-block;
  list-style: none;
  text-align: center;
  padding-left: 300px;
  padding-right: 300px;
  margin: 20px;
  padding-bottom: 10px;
}

.row h1 {
  font-size: 35px;
  border: 2px solid white;
}

.row h1 a {
  color: inherit;
  text-decoration: none;
}

.row p {
  font-size: 15px;
  border-right: 2px solid white;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  padding-bottom: 10px;
  font-weight: bold;
}

.row h2 {
  font-size: 25px;
  color: white;
  border-right: 2px solid white;
  border-left: 2px solid white;
  padding-bottom: 10px;
}

.row h1:hover {
  color: #3b3b3b;
  background-color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="Services" id="Services">

  <h1>Services</h1>
  <div id="wrapper">
    <div class="row">
      <div class="col-xs-4">
        <div class="text-center offer-box">
          <h1><a href="#Contact">Web Design</a></h1>
          <h2>Starting at $30</h2>
          <p>We create new and fresh designs for any website. We can work with you and create your exact vision or we can even go off of our own creativity and make something unique and brilliant. Either way, we know you will be satisfied with the finished
            product
          </p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="text-center offer-box">
          <h1><a href="#Contact">Web Development</a></h1>
          <h2>Starting at $50</h2>
          <p>If your website needs a simple or even a complex back-end, we're here to develop it and make your site function the way it needs to.</p>
        </div>
      </div>
      <div class="col-xs-4">
        <div class="text-center offer-box">
          <h1><a href="#Contact">Custom</a></h1>
          <h2>Starting at $20</h2>
          <p>If you need a custom service, whether it be small or big please feel free to contact us</p>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

It seems you're trying to use bootstrap in your code. I think the issue arises because you didn't link bootstrap.css.

In the snippet below it works.

Mistypes:

padding - left - wrong, should be padding-left

inline - block - wrong, should be inline-block

etc.

If you use bootstrap, you shouldn't change properties of .row manually.

Also .row should be wrapped by .container or .container-fluid

.row {
  display: inline - block;
  list-style: none;
  text-align: center;
  padding-left: 300 px;
  padding-right: 300 px;
  margin: 20 px;
  padding-bottom: 10 px;
}

.row h1 {
  font-size: 35 px;
  border: 2 px solid white;
}

.row h1 a {
  color: inherit;
  text-decoration: none;
}

.row p {
  font-size: 15 px;
  border-right: 2 px solid white;
  border-left: 2 px solid white;
  border-bottom: 2 px solid white;
  padding-bottom: 10 px;
  font-weight: bold;
}

.row h2 {
  font-size: 25 px;
  color: white;
  border-right: 2 px solid white;
  border-left: 2 px solid white;
  padding-bottom: 10 px;
}

.row h1: hover {
    color: #3b3b3b;
    background-color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="Services" id="Services">

<h1>Services</h1>
<div id="wrapper" class="container-fluid">
<div class="row">
<div class="col-xs-4">
  <div class="text-center offer-box">
    <h1><a href="#Contact">Web Design</a></h1>
    <h2>Starting at $30</h2>
        <p>We create new and fresh designs for any website. We can work with you and create your exact vision or we can even go off of our own creativity and make something unique and brilliant. Either way, we know you will be satisfied with the finished product</p>
</div>
</div>
<div class="col-xs-4">
 <div class="text-center offer-box">
    <h1><a href="#Contact">Web Development</a></h1>
    <h2>Starting at $50</h2>
        <p>If your website needs a simple or even a complex back-end, we're here to develop it and make your site function the way it needs to.</p>
   </div>
  </div>  
  <div class="col-xs-4">
   <div class="text-center offer-box">
    <h1><a href="#Contact">Custom</a></h1>
    <h2>Starting at $20</h2>
        <p>If you need a custom service, whether it be small or big please feel free to contact us</p>
  </div>
 </div>
</div>
</div>

Answer 3

add css:

.row {
  display: inline - block;
  list - style: none;
  text - align: center;
  padding - left: 300 px;
  padding - right: 300 px;
  margin: 20 px;
  padding - bottom: 10 px;
}

.row h1 {
  font - size: 35 px;
  border: 2 px solid white;
}

.row h1 a {
  color: inherit;
  text - decoration: none;
}

.row p {
  font - size: 15 px;
  border - right: 2 px solid white;
  border - left: 2 px solid white;
  border - bottom: 2 px solid white;
  padding - bottom: 10 px;
  font - weight: bold;
}

.row h2 {
  font - size: 25 px;
  color: white;
  border - right: 2 px solid white;
  border - left: 2 px solid white;
  padding - bottom: 10 px;
}

.row h1: hover {
    color: #3b3b3b;
    background-color: white;
}
.col-xs-4 {
    float:left;
    width:200px;
    height:300px;
    margin-left:100px;
}

and HTML:

<section class="Services" id="Services">

<h1 class="col-xs-4">Services</h1>
<div id="wrapper">
<div class="row">
<div class="col-xs-4">
  <div class="text-center offer-box">
    <h1><a href="#Contact">Web Design</a></h1>
    <h2>Starting at $30</h2>
        <p>We create new and fresh designs for any website. We can work with you and create your exact vision or we can even go off of our own creativity and make something unique and brilliant. Either way, we know you will be satisfied with the finished product</p>
</div>
</div>
<div class="col-xs-4">
 <div class="text-center offer-box">
    <h1><a href="#Contact">Web Development</a></h1>
    <h2>Starting at $50</h2>
        <p>If your website needs a simple or even a complex back-end, we're here to develop it and make your site function the way it needs to.</p>
   </div>
  </div>  
  <div class="col-xs-4">
   <div class="text-center offer-box">
    <h1><a href="#Contact">Custom</a></h1>
    <h2>Starting at $20</h2>
        <p>If you need a custom service, whether it be small or big please feel free to contact us</p>
  </div>
 </div>
</div>
</div>

Answer 4

add this CSS

.col-xs-4 {
    float: left;
    width: 33.33%;
}

otherwise add bootstrap css