如何在一行中对齐文本框 [英] How to align text boxs in one line

问题描述

我想知道如何在同一行中将三个文本框对齐。这是一些示例代码，如果您可以对其进行修改以帮助我的话，那就太好了！

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!

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

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

任何帮助都会非常感谢，我知道代码看起来也不是很整洁，但是我只是这样做是为了提高我对代码和成功的了解。

Any help would be greatly appreciated, I know the code doesn't look really neat either but I'm just doing this to improve my knowledge in code and suc.

谢谢！

推荐答案

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

和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>

这篇关于如何在一行中对齐文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！