Как выровнять элементы в html и css?

Я хочу написать небольшую страницу html, содержащую небольшую функцию поиска. Я хочу написать такую страницу:Как выровнять элементы в html и css?

Я создал кнопки, но я не знаю, как их выровнять и украсить, чтобы они выглядели как изображение выше. Я не хочу использовать bootstratp, но ton это делает только с помощью 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>

Но я не совсем уверен, что это хорошая идея. Не могли бы вы помочь исправить это:

Как выровнять кнопку, как на изображении? (кнопки на той же кнопке, кнопке поиска и отмены справа).
Как я могу украсить кнопки, чтобы они выглядели как изображение? Я имею в виду, как я могу использовать css, чтобы иметь синие кнопки, а не кнопки по умолчанию?

Спасибо!

источник

2017-01-25 salamanka44

Возможно, посмотрите на расширение своей базы знаний, а не на поиск немедленного решения. Вот [Введение в современные кнопки CSS] (https://www.sitepoint.com/modern-css-buttons/) – haxxxton

Следует отметить, что вы можете стилизовать элементы 'input' и' button', используя css , однако вы не можете стилизовать элементы 'select' &' option' (что означает, что вы должны создать свой собственный, чтобы представить поведение 'select', которое вы хотите). – nashcheez

можно выровнять с помощью ниже код HTML, но лучший способ заключается в использовании Див структуру на основе

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>

источник

2017-01-25 09:35:08

спасибо, это работает! – salamanka44

Ваша основная проблема заключается в том, что вы используете таблицы для структурирования вашего макета.

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

Что вы можете сделать сейчас, чтобы узнать последние методы CSS создания макета, сосредоточившись на CSS grids.

Затем, вы можете получить ваши руки КАС предварительно процессор как SASS, а затем изучить надлежащую основу для него, как Bourbon.

Последний и самый лучший способ выравнивания вещи так, как вы хотите, использует Flexbox model.

В последней версии CSS, есть даже установка grid format property, который будет делать вещи еще проще.

источник

2017-01-25 09:29:12 snkv

Я также думаю, что имеет смысл расширить вашу базу знаний. Очень старомодно использовать таблицу для форматирования макета. Например, вы можете поместить две кнопки за стол и дать им «margin-left» css.

Для кнопки украшения вы ищете в CSS атрибуты цвета (белый), цвет фона (синий), отступы, ширину и высоту.

источник

2017-01-25 09:29:27

Использование вместо того, чтобы структура таблицы создавала проблемы в гибком дизайне.
Используйте свойство CSS «display: inline-block», где вы хотите выровнять поля в одной строке.
Используйте свойство CSS background-color, color и т. Д., Чтобы украсить ваши кнопки.

источник

2017-01-25 09:29:53 Pooja

Kahn Academy делает хороший (и бесплатный!) Курс по основам HTML и CSS. Они также продолжают преподавать интерактивность на веб-страницах с помощью javascript, что будет важно знать, хотите ли вы, чтобы ваши кнопки делали что-либо, как только вы их хорошо выглядели.

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

источник

2017-01-25 09:34:15

TRY с рабочим демо, запустить фрагмент кода и изменения его до полного экрана

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

источник

2017-01-25 09:56:09

Как выровнять элементы в html и css?

ответ

Смежные вопросы