1

我在将具有可变大小的输入字段和具有固定大小的发布按钮定位在具有固定“外边距”的 div 内时遇到问题。

我提供了一个jfiddle 示例，您可以在其中看到错误的版本。

在这里你可以看到我的问题：

错误版本： 实际网站

“应该是”版本： 这就是它应该的样子

文字说明：

正如您在第二张图片中看到的那样，底部始终位于底部对我来说很重要......

.submitform {
    display: block;
    position: fixed;
    bottom: 0;
    ...more on jfiddle...
}

...并且发布按钮始终在右侧。下半部分的左右间隙应与上半部分相同。困难的是，输入字段应该具有灵活的大小，但应该占据左侧间隙和后按钮之间的所有空间。

我希望你能帮助我，因为在网上尝试和搜索数小时并没有给我带来正确的解决方案。

4

1 回答 1

2

试试这个：http: //jsfiddle.net/jgHAA/1/

.submitform {
    background: white;
    display: block;
    position: fixed;
    /* Instead of applying margin and width, simply set the bottom, left, 
       and right properties to 13px */
    bottom: 13px;  
    left: 13px;
    right: 13px;
    /*box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);*/
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    padding: 7px;
    overflow:hidden;
    box-sizing:border-box;
}

要让文本框填充宽度，您可以使用相同的技术：http: //jsfiddle.net/jgHAA/2/

.submitform  #post_input {
    display: block;
    font-size: 18px;
    border: none;
    outline: none;
    padding: 3px;
    /* set left and right, and z-index to make it appear behind the button.*/
    left:7px;
    right:7px;
    position:absolute;
    z-index:-1;
}
于 2012-12-18T17:45:16.403 回答