So richten Sie Textfelder in einer Zeile aus

Question

Ich möchte wissen, wie ich drei Textfelder in einer Zeile in derselben Zeile ausrichten kann. Hier ist ein Beispiel Code, wenn Sie es ändern könnten, um mir zu helfen, das wäre großartig!

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

Jede Hilfe wäre sehr dankbar, ich kenne den Code nicht wirklich ordentlich entweder sieht, aber ich mache das nur mein Wissen in Code und suc zu verbessern.

Dank!

Answer 1

hinzufügen, um dieses CSS

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

sonst hinzufügen Bootstrap css

Answer 2

einfach hinzufügen Bootstrap

Hinweis: das Ergebnis in der Vollbildansicht

.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

Es scheint, Sie versuchen, Bootstrap in Ihrem Code zu verwenden. Ich denke, das Problem tritt auf, weil Sie bootstrap.css nicht verknüpft haben.

In dem Ausschnitt unten funktioniert es.

mistypes:

padding - left - falsch, sollte padding-left

inline - block sein - falsch, sollte inline-block

sein usw.

Wenn Sie Bootstrap verwenden, sollten Sie nicht ändern Eigenschaften von .row manuell.

Auch .row sollte von .container oder .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

hinzufügen css gewickelt werden:

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

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