Question

我正在为youtube api搜索页面编写CSS。我在一个包装器div里面有一个搜索框，我想占用不超过父div的宽度的100％。但是，搜索框超出了div几个像素。我使用了我在css技巧上看到的盒子大小的轨道，但这还没有解决这个样式问题。我确定我忘了傻事，所以我需要另一个大脑来帮忙。

这是我在github上的项目：http://amalthea5.github.io/thinkful-tube/

编辑：感谢你们两位回答你已经解决了我的困境！

Answer 1

在padding上的父元素上使用margin而不是input，并使用box-sizing: border-box属性。

label {
    display: block; 
    padding: .5em;
}

#query {
    display: block; 
    width: 100%; 
    box-sizing: border-box; 
    margin: 0;
}

工作小提琴：http://jsfiddle.net/jcLgzcg1/

Answer 2

左右添加填充 .buttons { padding-left: 2em; padding-right: 2em;}

您不需要为#query

设置margin-left和margin-right

这是更新的css

.buttons { 
     text-align: center; 
     padding: 2em; 
     max-width: 900px; 
}
#query { 
    display: block; 
    border: 1px solid #000; 
    width: 100%; 
    font-size: 1.5em; 
    margin-bottom: 1em; 
}

Answer 3

这里发生的是#query使用左边距和边距右边强制输入框移出焦点。一个简单的解决方法是相应地更新以下css类。我提供的修复删除了不需要的边距，而是提供给按钮的父包装器。

.buttons {
    max-width: 900px;
    padding: 2em;
    text-align: center;
}

#query {
    border: 1px solid #000;
    display: block;
    font-size: 1.5em;
    margin-bottom: 1em;
    width: 100%;
}

div CSS中的搜索框

3 个答案: