Question

我有一个主NSArray *arrObjects = [responseObject valueForKey:@"Result"]; [arrObjects enumerateObjectsUsingBlock:^(NSDictionary *_Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) { [arrFilterResult addObject:@{@"FName":[obj valueForKey:@"FName"],@"LName":[obj valueForKey:@"LName"]}]; }];，里面有左和右。在左边，我有一个<div>。

我的问题是<input type = "text">元素的宽度和高度看起来比左边的<input>容器大。

请帮我解决输入元素。

DEMO

Answer 1

问题在于填充。

只需在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;
}

Answer 2

原生输入已应用padding和border。

将此添加到您的input CSS：

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

Answer 3

这就是你要找的东西：

 box-sizing: border-box;

所以你的CSS应该是这样的：

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

Answer 4

更改css中输入的高度

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 5

请试试这个：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 6

只需将高度更改为我的想法

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

调整div内的输入元素

6 个答案: