Регулирующий входной элемент внутри div

У меня есть главный <div>, внутри которого есть слева и правый.
На левой стороне у меня есть <input type = "text">.Регулирующий входной элемент внутри div

моя проблема в том, что ширина и высота элемента <input> выглядят больше, чем его контейнер, который находится слева <div>.

, пожалуйста, помогите мне с элементом ввода.

DEMO

источник

2016-09-22 avazwij

Уроженец вход имеет padding и border применяется к нему.

Добавьте это в input CSS:

border: 0; 
box-sizing: border-box;

источник

2016-09-22 12:16:32 Christoph

Проблема из-за заполнения.

Просто добавьте эти стили в вашем CSS:

* { 
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    -o-box-sizing:border-box; 
}

источник

2016-09-22 12:15:17

Это то, что вы ищете:

box-sizing: border-box;

Таким образом, ваш CSS должен выглядеть следующим образом:

.leftDiv input { 
    box-sizing: border-box; 
}

источник

2016-09-22 12:17:12

высота изменение ввода в css

div.wrapper { 
 
    width : 200px; 
 
    height : 30px; 
 
    background-color : red; 
 
} 
 

 
div.wrapper div.leftDiv { 
 
    float: left; 
 
    width : 30%; 
 
    height: 30px; 
 
    background-color : blue; 
 
} 
 

 
div.wrapper input[type = "text"] { 
 
    float: left; 
 
    width : 100%; 
 
    height: 20px; 
 
} 
 
div.wrapper div.rightDiv { 
 
    float: right; 
 
    width : 60%; 
 
    height: 30px; 
 
    background-color : yellow; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class = "wrapper"> 
 
    <div class ="leftDiv"> 
 
    <input type = "text" value = "1"> 
 
    </div> 
 
    <div class = "rightDiv"> 
 
    </div> 
 
</div> 
 
    
 
</div> 
 
</body> 
 
</html>

источник

2016-09-22 12:19:34 Aamir

Пожалуйста, попробуйте следующее:

div.wrapper { 
 
    width : 200px; 
 
    height : 20px; 
 
    background-color : red; 
 
} 
 

 
div.wrapper div.leftDiv { 
 
    float: left; 
 
    width : 30%; 
 
    height: 20px; 
 
    background-color : blue; 
 
} 
 

 
div.wrapper input[type = "text"] { 
 
    float: left; 
 
    width : 100%; 
 
    height: 20px; 
 
    box-sizing:border-box; 
 
} 
 
div.wrapper div.rightDiv { 
 
    float: right; 
 
    width : 60%; 
 
    height: 20px; 
 
    background-color : yellow; 
 
}

<div class = "wrapper"> 
 
    <div class ="leftDiv"> 
 
    <input type = "text" value = "1"> 
 
    </div> 
 
    <div class = "rightDiv"> 
 
    </div> 
 
</div>

источник

2016-09-22 12:22:12

Просто измените высоту высоту, что моя идея

div.wrapper input[type="text"] { 
    float: left; 
    width: 100%; 
    height: 14px; 
}

источник

2016-09-22 12:27:31

Регулирующий входной элемент внутри div

ответ

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