Question

我正在尝试创建一个输入表单，输入框的右侧不断被切断。我的代码如下：

HTML / CSS

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {


    let touch = touches.first

    if let point = touch?.location(in: self.view) {


        print(point.x)
        print(point.y)

        // Scaling the image to it places the dot proportionate to the UITouch points of the View

        let X = CGFloat(point.x / self.view.frame.size.width)
        let y = CGFloat(point.y / self.view.frame.size.height)

        let newPoint = CGPoint(x: image.size.width * X , y: image.size.height * y )



    }
}

.add_idea_box {
  background-color: #ffffff;
  min-width: 1110px;

  margin: 0px 20px 20px 20px;
  overflow: hidden;

  border: solid 1px #6a6a6a;
  box-shadow: 3px 3px 3px #cecdcd;
  -moz-box-shadow: 3px 3px 3px #cecdcd;
  -webkit-box-shadow: 3px 3px 3px #cecdcd;

  text-align: center;
  padding-right: 25px;
}

.add_idea_box_left {
  float: left;
  overflow: hidden;
  width: 130px;
  height: 200px;
}

.add_idea_box_left_top {
  width: 100%;
  padding: 15px 20px 20px 0px;
}

.add_idea_box_left_bottom {
  width: 100%;
  text-align: left;
  padding-left: 22px;
}

.add_idea_box_left_bottom_row {
  width: 100%;
  height: 27px;
  font-family: "Arial";
  font-size: 85%;
  color: #363636;
}

.red_circle {
  display: inline;
  float: left;
  width: 15px;
  height: 15px; 
  border-radius: 50%; 
  background-color: #ff5f57;
  margin-right: 7px;
}

.yellow_circle {
  display: inline;
  float: left;
  width: 15px;
  height: 15px; 
  border-radius: 50%; 
  background-color: #ffbd2e;
  margin-right: 7px;
}

.green_circle {
  display: inline;
  float: left;
  width: 15px;
  height: 15px; 
  border-radius: 50%; 
  background-color: #29cb41;
  margin-right: 7px;
}

.add_idea_box_right {
  overflow: hidden;
  text-align: left;
  min-height: 200px;
  padding: 20px 0px 0px 25px;
  border-left: solid 1px #bab6b6;
}

.add_idea_box_right_top {
  overflow: visible;
  width: 100%;
}

.add_idea_box_right_bottom {
  overflow: hidden;
  float: right;
  height: 40px;
  margin-top: 10px;
  margin-bottom: 10px;
}

input[type=submit] {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #ffffff;
  padding: 10px 10px;

  background: -moz-linear-gradient(
    top,
    #fa8e00 0%,
    #ab0000);
  background: -webkit-gradient(
    linear, left top, left bottom,
    from(#fa8e00),
    to(#ab0000));

  border: 1px solid #7d0000;

  -moz-box-shadow:
    0px 1px 3px rgba(000,000,000,0.5),
    inset 0px 0px 2px rgba(255,255,255,0.7);
  -webkit-box-shadow:
    0px 1px 3px rgba(000,000,000,0.5),
    inset 0px 0px 2px rgba(255,255,255,0.7);
  box-shadow:
    0px 1px 3px rgba(000,000,000,0.5),
    inset 0px 0px 2px rgba(255,255,255,0.7);
  text-shadow:
    0px -1px 0px rgba(000,000,000,0.4),
    0px 1px 0px rgba(255,255,255,0.3);
}

input[type=text] {
  width: 100%;
  height: 20px;
  padding: 10px 10px;
  border: 1px solid #bab6b6;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font-family: "Arial";
  color: #bab6b6;
  background: #efeeee;
}

textarea  {
  width: 100%;
  height: 60px;
  padding: 10px 10px;
  border: 1px solid #bab6b6;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  margin-top: 10px;
  font-family: "Arial";
  color: #bab6b6;
  background: #efeeee;
}

实时版本位于：http://quickid.net/test2/ideaboard2.html ...您可以看到输入框和文本框的右侧都被切断，右侧边框没有显示。

非常感谢任何帮助。谢谢！

Answer 1

It's because you have set all of these properties on your input element:

width: 100%
padding: 10px
border: 2px

So the input element takes up 100% of the width and it also has 10px padding both left and right on top of that and 2px border on top of that. They all add up so the total width of your element is more than 100% of the width of the containing element.

Answer 2

Try modifying the padding of this class, so try this one.

FROM THIS:

 .add_idea_box_right {
    overflow: hidden;
    text-align: left;
    min-height: 200px;
    padding: 20px 0px 0px 25px;
    border-left: solid 1px #bab6b6;
}

TO THIS:

.add_idea_box_right {
 overflow: hidden;
 text-align: left;
 min-height: 200px;
 padding: 20px 25px 0px 25px;
 border-left: solid 1px #bab6b6;
}

Let me know if it helped you.

Answer 3

这是因为建议的100％宽度会干扰某些填充，将宽度减小到较小的百分比并使输入字段居中，以便随着分辨率的提高而更好地扩展。

编辑：如果你检查mozilla上的元素，你可以清楚地看到与pick元素发生重叠的地方！

Answer 4

将box-sizing属性添加到input和text-area并相应地设置

CSS

.add_idea_box_right_top input[type="text"],
.add_idea_box_right_top textarea{
box-sizing:border-box;
}

希望这会有所帮助..

输入框被切断

4 个答案: