1

可変サイズの入力フィールドと固定サイズの投稿ボタンを、固定の「外側マージン」を持つdiv内に配置するのに問題があります。

間違ったバージョンが表示されるjfiddleの例を示しました。

ここで私の問題を見ることができます：

間違ったバージョン： 実際のウェブサイト

「あるべき」バージョン： これはどのように見えるべきかです

テキストによる説明：

2枚目の写真でわかるように、私にとって重要なのは、下部が常に下部にあることです...

.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 に答える