如何在一行中对齐文本框

Question

我想知道如何在同一行中对齐三行文本框。这里是一些示例代码，如果你可以修改它来帮助我，那会很棒！

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

任何帮助将不胜感激，我知道代码看起来并不很整洁要么但我只是这样做是为了提高自己的代码和SUC知识。

谢谢！

Answer 1

添加此CSS

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

否则添加引导CSS

Answer 2

只需添加引导

注：查看结果在全屏

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

看来你试图在代码中使用bootstrap。我认为这个问题的出现是因为你没有链接bootstrap.css。

在下面的代码片段中有效。

输入错误：

padding - left - 不对，应该是padding-left

inline - block - 不对，应该是inline-block

等

如果使用引导程序，你不应该改变的性质手动输入.row。

另外.row应由.container或.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 4

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