htmlとcssの要素を揃えるには？

Question

ちょっとした検索機能を含むちょっとしたhtmlページを書いてみたいと思います。

私はボタンを作成しましたが、私はそれらを整列させ、上記のように飾る方法はわかりません。私はbootstratpを使用したくないが、トンはcssを使ってこれを行うだけである。しかし、私は... CSSも

私はタグを使用することで得たアイデアを知らないので、ここで私のhtmlコードです：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<table> 
 
    <tr> 
 
     <td>Invoice Number :</td> 
 
     <td> 
 
     <input name="invoiceNumber"> 
 
     </td> 
 

 
     <td>Invoice Supplier Name :</td> 
 
     <td> 
 
     <input name="invoiceSupplier"> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>Invoice Status :</td> 
 
     <td> 
 
     <select name="invoiceStatus"> 
 

 
      <option> </option> 
 
      <option> Import error </option> 
 
      <option> Invoice control required </option> 
 
      <option> Other Document </option> 
 
     </select> 
 
     </td> 
 

 
     <td>Invoice Category :</td> 
 
     <td> 
 

 
     <select name="invoiceCategory"> 
 
      <option></option> 
 
      <option>Invoice with PO and GR</option> 
 
      <option>Invoice with GR</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>Order :</td> 
 
     <td> 
 
     <select name="order"> 
 

 
      <option> Number </option> 
 
      <option> Supplier </option> 
 
      <option> Date </option> 
 
      <option> Net Amount </option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <button type="button">Search</button> 
 
     </td> 
 
     <td> 
 
     <div class="detail"> 
 
      <button type="reset">Cancel</button> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table>

しかし、私はよそれが良いアイデアであることは間違いありません。それを解決するために助けてください：

• ボタンを画像のように整列させるにはどうすればよいですか？ （同じlignのボタン、右側の検索とキャンセルボタン）。
• 画像のようにボタンを飾ることができますか？私はどのようにデフォルトのボタンではなく、青いボタンを持つためにCSSを使用することができますか？

ありがとうございます！

Answer 1

あなたは下記のHTMLコードを使用して揃えることができますが、最良の方法は、スニペットや変更を実行し、作業のデモを試してみてくださいdiv要素に基づく構造

button{ background:#33b5e5; border:none; padding:12px 35px;color:#fff;margin-right:60px; display:inline-block; margin-top:10px; 
 
    \t } 
 
    \t select,input{ padding:6px; min-height:20px; vertical-align:middle; } 
 
    \t .mr-30{margin-right:30px;} 
 
    \t td{line-height:40px;}

 <table> 
 
     <tr> 
 
      <td>Invoice Number :</td> 
 
      <td> 
 
      <input name="invoiceNumber" class="mr-30"> 
 
      </td> 
 
    
 
      <td>Invoice Supplier Name :</td> 
 
      <td> 
 
      <input name="invoiceSupplier"> 
 
      </td> 
 
     </tr> 
 
    
 
     <tr> 
 
      <td>Invoice Status :</td> 
 
      <td> 
 
      <select name="invoiceStatus" class="mr-30"> 
 
    
 
       <option> </option> 
 
       <option> Import error </option> 
 
       <option> Invoice control required </option> 
 
       <option> Other Document </option> 
 
      </select> 
 
      </td> 
 
    
 
      <td>Invoice Category :</td> 
 
      <td> 
 
    
 
      <select name="invoiceCategory"> 
 
       <option></option> 
 
       <option>Invoice with PO and GR</option> 
 
       <option>Invoice with GR</option> 
 
      </select> 
 
      </td> 
 
     </tr> 
 
    
 
     <tr> 
 
     
 
      <td colspan="4" style="text-align:right"> 
 
      <div class="detail"> 
 
      <button type="button">Search</button> 
 
       <button type="reset">Cancel</button> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     </table>

Answer 2

ここでの主な問題は、レイアウトを構造化するためにテーブルを使用していることです。あなたは今何ができるか

This is the most obsolete way of doing things there is.

、その後CSS grids.

に焦点を当て、あなたのレイアウトを作成するための最新のCSSの方法を学ぶことです、あなたはあなたの手の上で得ることができますSASSのようなCSSプリプロセッサは、それのための適切なフレームワークを学ぶBourbon.

物事にあなたが望むように整合させるの最新かつ最高の方法は、CSSの最新バージョンでFlexbox model.

を使用しているために、物事がさらに容易になりますでもgrid format property設定があります。

Answer 3

また、ナレッジベースを広げることが理にかなっていると思います。 テーブルを使用してレイアウトをフォーマットするのはとても古くからあります。 たとえば、テーブルの外側に2つのボタンを置き、CSSに「margin-left」を付けることができます。

ボタンの装飾では、css属性の色（白）、背景色（青色）、パディング、幅と高さを探しています。

Answer 4

1. テーブル構造がレスポンシブデザインに問題を生じるためではなく、代わりに使用します。
2. フィールドを同じ行に整列させるCSSプロパティの "display：inline-block"を使用します。
3. CSSプロパティbackground-color、colorなどを使用してボタンを飾ります。

Answer 5

Kahn Academyは、HTMLとCSSの基本についての良い（無料です）コースです。また、JavaScriptを使ってウェブページのインタラクティブ性について教えています.Javascriptは、あなたのボタンが見た目を良くした後に何かをしたいかどうかを知る上で不可欠です。

https://www.khanacademy.org/computing/computer-programming/html-css

Answer 6

を使用することです全画面表示へ

* { 
 
    box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    -ms-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
} 
 
input, select { 
 
\t width: 100%; 
 
\t padding: 10px 15px; 
 
} 
 
table td { 
 
\t padding: 15px; 
 
} 
 
button { 
 
\t background: #33b5e5; 
 
\t border: none; 
 
\t padding: 12px 35px; 
 
\t color: #fff; 
 
\t margin-right:14px; 
 
\t display: inline-block; 
 
\t margin-top: 10px; 
 
}

<table> 
 
    <tr> 
 
    <td>Invoice Number :</td> 
 
    <td><input name="invoiceNumber"></td> 
 
    <td>Invoice Supplier Name :</td> 
 
    <td><input name="invoiceSupplier"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Invoice Status :</td> 
 
    <td><select name="invoiceStatus"> 
 
     <option> </option> 
 
     <option> Import error </option> 
 
     <option> Invoice control required </option> 
 
     <option> Other Document </option> 
 
     </select></td> 
 
    <td>Invoice Category :</td> 
 
    <td><select name="invoiceCategory"> 
 
     <option></option> 
 
     <option>Invoice with PO and GR</option> 
 
     <option>Invoice with GR</option> 
 
     </select></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Order :</td> 
 
    <td><select name="order"> 
 
     <option> Number </option> 
 
     <option> Supplier </option> 
 
     <option> Date </option> 
 
     <option> Net Amount </option> 
 
     </select></td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2"></td> 
 
    <td><button type="button">Search</button> <button type="reset">Cancel</button></td> 
 
    </tr> 
 
</table>