Блог

Главная - Вопросы по программированию - Установите html-форму с выбором ввода, текстом и кнопкой по горизонтали

Установите html-форму с выбором ввода, текстом и кнопкой по горизонтали

#html #bootstrap-4

Вопрос:

Я пытаюсь установить форму горизонтально, но к тому моменту, когда каждый элемент находится вертикально, он нужен мне горизонтально.

 <html>
    <head>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>
    
    <body>
    
       <div class="container">
            <div class="row">
            <div class="col-sm-12" style="background-color:#cccccc; padding:5px;">
                <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                             <li class="breadcrumb-item"><i class="fas fa-map-marker-alt"></i> Candidates</li>
    
                            </ol>
                            
                        </nav>  
                </div>
            
            <div class="col-sm-12" style="background-color:white; padding:5px;">
              <nav class="navbar navbar-light float-left">
                  <form class="form-inline">
                  <select name="type" class="form-control" id="exampleFormControlSelect1">
                      <option>Search By:</option>
                      <option>names</option>
                      <option>phone</option>
                      <option>email</option>
                    </select>
                    
                    <input name="searchby" class="form-control mr-sm-2" type="search" placeholder="enter a value.." aria-label="Search">
                    
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                  </form>
                </nav>
            </div>
                
            </div>
        </div>
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </body>

Вот такая картинка:

введите описание изображения здесь

Мне нужно что-то вроде этого:

введите описание изображения здесь

Я пробовал много способов, но застрял, мне также нужно добавить другую форму ниже, также горизонтально. Я буду признателен за любую помощь. Большое спасибо.

Ответ №1:

как лучше всего добавлять пробел между каждым элементом

Вы можете использовать gap (зазор в сетке):

 .form-inline {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 1em;
} 
 <html>

<head>
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-sm-12" style="background-color:#cccccc; padding:5px;">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><i class="fas fa-map-marker-alt"></i> Candidates</li>

          </ol>

        </nav>
      </div>

      <div class="col-sm-12" style="background-color:white; padding:5px;">
        <nav class="navbar navbar-light float-left">
          <form class="form-inline">
            <select name="type" class="form-control" id="exampleFormControlSelect1">
              <option>Search By:</option>
              <option>names</option>
              <option>phone</option>
              <option>email</option>
            </select>

            <input name="searchby" class="form-control mr-sm-2" type="search" placeholder="enter a value.." aria-label="Search">

            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </nav>
      </div>

    </div>
  </div>
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

Но как я предотвращаю разделение большого размера, когда добавляю другую форму ниже

 form.form-inline{
margin-bottom: 0px;
padding-bottom:0px;
padding-top:none;
} 
  
<html>
 
<head>
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
 
<style type="text/css">
form.form-inline{
    display: inline-grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-column-gap: 10px;
    grid-row-gap:5px;
}
</style>
<body>
 
  <div class="container">
    <div class="row">
      <div class="col-sm-12" style="background-color:#cccccc; padding:5px;">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><i class="fas fa-map-marker-alt"></i> Candidates</li>
 
          </ol>
 
        </nav>
      </div>
 
      <div class="col-sm-12" style="background-color:white; padding:5px;">
        <nav class="navbar navbar-light float-left">
          <form class="form-inline">
            <select name="type" class="form-control" id="exampleFormControlSelect1">
              <option>Search By:</option>
              <option>names</option>
              <option>phone</option>
              <option>email</option>
            </select>
 
            <input name="searchby" class="form-control mr-sm-2" type="search" placeholder="enter a value.." aria-label="Search">
 
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </nav>
        
        <nav class="navbar navbar-light float-left">
          <form class="form-inline">
            <select name="type" class="form-control" id="exampleFormControlSelect1">
              <option>Search By:</option>
              <option>names</option>
              <option>phone</option>
              <option>email</option>
            </select>
 
            <input name="searchby" class="form-control mr-sm-2" type="search" placeholder="enter a value.." aria-label="Search">
 
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </nav>
        
      </div>
 
    </div>
  </div>
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

Комментарии:

1. Спасибо, брат, это очень полезно для меня. Но как я предотвращаю разделение большого размера, когда добавляю другую форму ниже, например: imgur.com/a/7WYW0TQ Я удалил навигационный тег, но мне нужно меньше места

2. @FreddyDaniel Можете ли вы предоставить полный код?

3. Я использую шаблон с использованием фреймворка laravel, я просто копирую этот фрагмент кода, который я поместил в своем посте.. Возможно, шаблон генерирует такие большие пробелы или ту же загрузочную программу.

4. @FreddyDaniel В этом случае все равно было бы очень полезно, если бы вы предоставили выходной HTML (скопированный из браузера) и CSS

5. Ок, братан, вот код pastebin.com/urpKhrbr Я только что добавил еще одну html-форму

Ответ №2:

Небольшая корректировка CSS в форме должна выровнять входные данные по горизонтали.

 form.form-inline{
    display:flex;
    flex-direction: row;
}

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

 form.form-inline{
    display: inline-grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-column-gap: 10px;
    grid-row-gap:5px;
}

Комментарии:

1. Привет, братан, это работает, но лучше всего добавить пространство между каждым элементом. imgur.com/a/UvGhQg1 А также мне нужен текст для ввода, размер которого по ширине больше , теперь он выглядит крошечным. Спасибо

2. Что я должен сделать, чтобы предотвратить этот большой размер, когда я добавил другую форму ниже imgur.com/a/TxqrGfY спасибо.

3. @FreddyDaniel. Вы также можете использовать встроенную сетку: form.form-inline{ display: inline-grid; grid-template-columns: 1fr 2fr 1fr; grid-column-gap: 10px; } это позволяет легко контролировать ширину столбцов и расстояние между элементами.

Метки: ,