div 내 입력 요소 조정

왼쪽 및 오른쪽 것이있는 메인 <div>이 있습니다.
왼쪽에는 <input type = "text">입니다.div 내 입력 요소 조정

내 문제는 <input> 요소의 너비와 높이가 왼쪽 <div> 인 컨테이너보다 크게 보입니다.

입력 요소를 도와주세요.

2016-09-22 avazwij

네이티브 입력 padding 및 border이 적용있다.

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

이 당신을 위해 무엇을 찾고 있습니다 :

당신의 input CSS이 추가

box-sizing: border-box;

그래서 CSS는 다음과 같아야합니다

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

출처

2016-09-22 12:17:12

변경 높이 의 입력 사항

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 내 입력 요소 조정

답변

관련 문제