Отображение метки и входов в одной строке с использованием css

Я хотел бы отображать и метку, и ввод в одной строке с использованием CSS для следующей формы. Я пробовал использовать display, float и clear, но не смог получить тот "вид", который кодировал.

Форма должна выглядеть так форма

<header>
  <title> Registration form </title>
  <link rel = "stylesheet" type = "text/css" href = "style.css">
</header>


<h2>Register here please ! </h2>

<form id = "simpleform">
  <fieldset>
    <label for = "name">Full Name </label>
    <input type = "text" name = "name" id = "name">

    <label for = "age">Age in Years </label>
    <input type = "number" name = "age" id = "age">

    <label for = "email">Email ID</label>
    <input type = "email" name = "email" id = "email">

    <label for = "email">Email ID</label>
    <input type = "email" name = "email" id = "email">

    <label for = "gender">Gender</label>
    <input type = "radio" name = "gender" value = "male"> Male
    <input type = "radio" name = "gender" value = "Female">Female<br>

    <label for = "hobbies">Hobbies</label>
    <input type = "checkbox" name = "hobbies" value = "Reading"> Reading Books
    <input type = "checkbox" name = "hobbies" value = "movies"> Watching Movies
    <input type = "checkbox" name = "hobbies" value = "Singing"> Singing

    <label for = "country">Country</label>
    <select name = "country">
      <option value = "us">United States</option>
      <option value = "India">India</option>
    </select>
    <br>

    <lable for = "comments">Comments</lable>
    <textarea name = "comments" id = "comments" rows=5 cols = "50"></textarea>

    <input type = "submit">
    <input type = "reset" value = "Start Again">
  </fieldset>
</form>

Пожалуйста, опубликуйте также свой CSS и подумайте о том, чтобы поместить свое изображение в строку, а не в качестве ссылки - это облегчит другим чтение вашего вопроса. Спасибо!

— 15.07.2018 20:46

html css forms user-interface

15.07.2018 20:30

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 2

Есть много способов получить макет из 2 столбцов, но использование table, вероятно, является наиболее простым и понятным, например:

    <form id = "simpleform">
        <fieldset>
        <table>
          <tr>
            <td><label for = "name">Full Name</label></td>
            <td><input type = "text" name = "name" id = "name"></td>
          </tr>
          <tr>
            <td><label for = "age">Age in Years</label></td>
            <td><input type = "number" name = "age" id = "age"></td>
          </tr>
          <tr>
            <td><label for = "email">Email ID</label></td>
            <td><input type = "email" name = "email" id = "email"></td>
          </tr>
          <tr>
            <td><label for = "gender">Gender</label></td>
            <td>
              <input type = "radio" name = "gender" value = "male"> Male
              <input type = "radio" name = "gender" value = "Female">Female
            </td>
          </tr>
          <tr>
            <td><label for = "hobbies">Hobbies</label></td>
            <td>
              <input type = "checkbox" name = "hobbies" value = "Reading"> Reading Books
              <input type = "checkbox" name = "hobbies" value = "movies"> Watching Movies
              <input type = "checkbox" name = "hobbies" value = "Singing"> Singing
            </td>
          </tr>
          <tr>
            <td><label for = "country">Country</label></td>
            <td>
              <select name = "country">
                <option value = "us">United States</option>
                <option value = "India">India</option>
              </select>
            </td>
          </tr>
          <tr>
            <td><lable for = "comments">Comments</lable></td>
            <td>
              <textarea name = "comments" id = "comments" rows=5 cols = "50"></textarea>
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <input type = "submit">
              <input type = "reset" value = "Start Again">
            </td>
          </tr>
        </table>
        </fieldset>
    </form>

Понятно, но вся идея состоит в том, чтобы также использовать стили css.

— 16.07.2018 03:40

15.07.2018 20:41

Я переработал свои html и css и получил желаемый результат

*{
    margin: 0;
    padding: 0;
}

body{
    font-family:verdana sans-serif;
    background-color: #99ffcc;
}


h2{
    margin-top: 100px;
    text-align: center;
    color: blue;
    
}

#simpleform{
    width: 500px;
    margin: auto;
    height: 400px;
    border: 1px solid red;
    background-color: #ccc;
    
    
}

label{
    text-align: right;
    clear: left;
    float: left;
    padding-right:13px;
    margin-top: 12px;
    width: 150px;
    
}


input,textarea {
   margin-top: 12px;
   width: auto;
    
}

input[type = "email"]{
    margin-top:16px;}
    
input[type = "radio"]{
    margin-top: 16px;
}

input[type = "checkbox"]{
    margin-top: 16px;
}

input[type = "number"]{
    margin-top:16px;
}
select{
    margin-top: 13px;
}

#buttons{
    margin-left:160px;
}

input[type = "submit"]{
    margin-right:80px;
    background-color: white;
    padding: 10px;
    border-radius:10px;
    border: 1px solid black;
}

input[type = "reset"]{
    margin-right:80px;
    background-color: white;
    padding: 10px;
    border-radius:10px;
    border: 1px solid black;}


input[type = "submit"]:hover
{
  background-color: aquamarine;  
}

input[type = "reset"]:hover
{
  background-color: aquamarine;  
}

input[type = "text"],input[type = "number"],input[type = "email"]{
    width:200px;
    border: 1px solid black;
}

<html>
    <header><title> Registration form </title>
    <link rel = "stylesheet" type = "text/css" href = "style.css"> 
    </header>
      
    <body>
    <h2>Register here please ! </h2>
        
        <form id = "simpleform">
            
            
            <div>
            <label for = "name">Full Name </label>
            <input type = "text" name = "name" id = "name">
            </div>
                
            <div>
            <label for = "age">Age in Years </label>
            <input type = "number" name = "age" id = "age">
            </div>
            
            <div>
            <label for = "email">Email ID</label>
            <input type = "email" name = "email" id = "email">
            </div>
                
                
            <div>
            <label for = "gender">Gender</label>
            <input type = "radio" name = "gender" value = "male"> Male
            <input type = "radio" name = "gender" value = "Female">Female<br>
            </div>
            
            <div>
            <label for = "hobbies">Hobbies</label>
            <input type = "checkbox" name = "hobbies" value = "Reading"> Reading Books
            <input type = "checkbox" name = "hobbies" value = "movies"> Watching Movies
            <input type = "checkbox" name = "hobbies" value = "Singing"> Singing
            </div>
            
            <div>
            <label for = "country">Country</label>
            <select name = "country">
            <option value = "us">United States</option>
            <option value = "India">India</option>
            </select><br>
            </div>
            
            <div>
            <label for = "comments" id = "lable-comment">Comments</label>
            <textarea name = "comments" id = "comments" rows=5 cols = "50"></textarea>
            </div>
            
            <div id = "buttons">
            <input type = "submit">
            <input type = "reset" value = "Start Again"></div>
            
        </form>
    
    </body>
    




</html>

16.07.2018 03:37

Другие вопросы по теме

Html5 - наведение курсора на закругленные изображения в сафари

JavaScript, HTML, CSS в диаграмму классов

Какой плагин будет использовать для начальной загрузки или html и css, например http://www.gwadarrealestate.pk/map/lahore/dha-lahore-rahbar-map.html

Показать / скрыть на основе раскрывающегося списка

React - раскрывающийся список Bootstrap

Safari SVG Linear Gradient не работает в Safari

Держите вертикальную полосу прокрутки в фиксированном положении независимо от горизонтальной прокрутки

Как использовать переменную JavaScript в CSS?

Как изменить положение элементов html, используя только css?

Как я могу сделать свое изображение более заметным на мобильном телефоне

Отображение метки и входов в одной строке с использованием css

Ответы 2

Другие вопросы по теме

Похожие вопросы