Сделать ребенка div как встроенный? - PullRequest
Новая
       0

Сделать ребенка div как встроенный?

0 голосов
/ 21 февраля 2020

У меня есть следующий код 

input.check{
          display: inline;
        }
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.check{
  float: left;
  }
input.check{
  display: inline;
}
#parent { overflow: hidden }
 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" >
        <title>test</title>
    </head>
    <body>
        <form action="">
            <div >
                ENTER x:-
                <input type="text">
            </div>
            <div  >
                ENTER y:-
                <input type="text">
            </div>
            <div id="parent">
                ENTER from and to
                <br>
                <div class="check">
                FROM:-
                <input type="text">
                </div>
                <div class="check">
                TO:-
                <input type="text">
                </div>
            </div>
            <div >
                SEARCH COLUMNS:-
                <input id="columns" type="text">
           </div>
        </form>
    
    </body>
    </html>
Если вы запустите этот код, вы увидите, что текстовое поле для «от» и «до» идет под ними, даже если я попытался сделать их встроенными с отображением по умолчанию «inline» -блок "через css (input[type=text]). Я хочу, чтобы другие были такими, какие они есть, но для «от» и «до» нужно go после меток, таких как встроенные элементы. Спасибо! и, пожалуйста, дайте мне знать причину, по которой я не могу переопределить свойство отображения

Ответы [ 2 ]

1 голос
/ 21 февраля 2020

Заменить CSS на .check class 

 .check{
    float: left;
 }

with

 .check {
     float: left;
     display: flex;
     align-items: center;
 }
0 голосов
/ 21 февраля 2020

ваш код: 

input.check{
  display: inline;
}

не будет работать, потому что input.check на самом деле означает и элемент input, который также имеет класс check, но ни один из ваших элементов ввода не имеет класса check в html.

Если вы хотите, чтобы метка и ввод располагались на одной строке и не хотели использовать flex, это то, что вы можете сделать: 

.check > input {    
  display: inline;
  width: auto;
}

с помощью flexbox: 

.check {
     float: left;
     width: 200px;  /* <== as you wish */
     display: flex;
     align-items: center;
 }

 .check > input {
   flex: 1
 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...