如何在一行中對齊文本框

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>