Question

我有一个html输入。

输入有padding: 5px 10px;我希望它是父div宽度的100％（这是流畅的）。

然而，使用width: 100%;会导致输入为100% + 20px，我该如何解决此问题？

Answer 1

box-sizing: border-box是一种快速，简便的解决方法：

这will work in all modern browsers和IE8 +。

以下是演示：http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

现代浏览器不需要浏览器前缀版本（-webkit-box-sizing等）。

Answer 2

这就是我们在CSS中使用box-sizing的原因。

我编辑了您的示例，现在可以在Safari，Chrome，Firefox和Opera中使用。看看：http://jsfiddle.net/mathias/Bupr3/ 我添加的只是：

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

不幸的是，IE7等旧版浏览器不支持此功能。如果您正在寻找适用于旧IE的解决方案，请查看其他答案。

Answer 3

也使用百分比填充并从宽度中删除：

padding: 5%;
width: 90%;

Answer 4

您可以不使用box-sizing和不清晰的解决方案（例如width~=99%）来执行此操作。

Demo on jsFiddle：
enter image description here

保持输入padding和border
添加到输入否定横向margin = border-width + horizontal padding
从上一步添加到输入的水平padding包装等于margin

HTML标记：

<div class="input_wrap">
    <input type="text" />
</div>

<强> CSS：

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

Answer 5

使用css calc（）

超级简单而且棒极了。

input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}

如下所示：Div width 100% minus fixed amount of pixels
通过webvitaly（https://stackoverflow.com/users/713523/webvitaly）
原始来源：http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

刚刚在这里复制了这个，因为我差点错过了另一个帖子。

Answer 6

假设我在一个15px填充的容器中，这就是我一直用于内部的部分：

width:auto;
right:15px;
left:15px;

这会将内部部分拉伸到任何宽度，应该小于15px两侧。

干杯

安迪

Answer 7

你可以尝试一些定位技巧。您可以将输入放在具有position: relative和固定高度的div中，然后在输入上放置position: absolute; left: 0; right: 0;，以及您喜欢的任何填充。

Live example

Answer 8

将输入框'padding移动到包装元素。

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

请参阅此处的示例：http://jsfiddle.net/L7wYD/1/

Answer 9

以下是来自codeontrack.com的建议，该建议有很好的解决方案示例：

不是将div的宽度设置为100％，而是将其设置为auto，并确保将<div>设置为display：block（<div>的默认值）。

Answer 10

只需了解width：auto;宽度：100％; 宽度：自动;将（自动）MATICALLY计算宽度，以适应包含div的精确给定，包括填充。宽度100％扩展宽度并添加填充。

Answer 11

将它包装在容器中怎么样？容器应该具有如下风格：

{
    width:100%;
    border: 10px solid transparent;
}

Answer 12

我有同样的问题。像这样修复它：

width: 100%;
padding: 5px;
/*--------------Now remove from padding what you've added---------------*/
margin:-5px;

干杯

Answer 13

试试这个：

     public ModelAndView exportToExcel(String fileName1, String filename2,String sheetname1,String sheetName2,
        String[] headerLabels1, String[] headerLabels2,int[] datatypeArray1,int[] datatypeArray2, String procString1,String procString2,
        Object[] objarray, HttpServletRequest arg0,
        HttpServletResponse arg1, String[] dbColumnNameArray1,String[] dbColumnNameArray2)
        throws Exception {
    Log.info(DownloadExcelController.class,
            "Execution Starts..exportExcel()");

    Map<String, DownloadExcelBean> downloadExcelBean = new HashMap<String, DownloadExcelBean>();
    //System.out.println(" in export excel part....."+procString+":::"+datatypeArray);
    List<List> workLists1 = downloadExcelService.storedProcedureToExcel(
            datatypeArray1, procString1, objarray, dbColumnNameArray1);

    List<List> workLists2 = downloadExcelService.storedProcedureToExcel(
            datatypeArray2, procString2, objarray, dbColumnNameArray2);

    DownloadExcelBean bean = new DownloadExcelBean();

    bean.setFilename(fileName1);
    bean.setSheetname(sheetname1);
    bean.setHeaderArray(headerLabels1);
    bean.setDatatypeArray(datatypeArray1);
    // bean.setVisibleArray(visibleArray);

    bean.setData(workLists1);

    DownloadExcelBean bean2 = new DownloadExcelBean();
    bean2.setFilename(filename2);
    bean2.setSheetname(sheetName2);
    bean2.setHeaderArray(headerLabels2);
    bean2.setDatatypeArray(datatypeArray2);
    bean2.setData(workLists2);

    downloadExcelBean.put("downloadExcelBean", bean);
    downloadExcelBean.put("downloadExcelBean2", bean2);
    return new ModelAndView("DownloadExcelView", "model",
                downloadExcelBean);



}

Answer 14

自上次回答这个问题以来，浏览器可能已经发生了变化，但这是我唯一能够可靠地完成此任务的方法：

    width: auto;
    left: 0;
    right: 0;

然后您可以根据需要设置边距/填充，并且元素不会超出其可用宽度。

这与过去@andology 的回答类似，但如果您将左/右都设为 0，那么您可以根据需要制作 margin 和/或 padding。所以这始终是我的默认 div。

Answer 15

对我来说，使用margin:15px;padding:10px 0 15px 23px;width:100%的结果是：

对我来说，解决方案是使用width:auto而不是width:100%。我的新代码是：

margin:15px;padding:10px 0 15px 23px;width:auto。然后元素正确对齐：

Answer 16

你可以这样做：

width: auto;
padding: 20px;

宽度：100％-padding？

16 个答案:

Live example