html - リキッドレイアウトとボーダー

Question

リキッド レイアウトとボーダーに問題があり、要素がオーバーフローしています。

• これは、境界線のないページの例を含む jfiddle です (正常に動作します): http://jsfiddle.net/eRaB5/1/
• これが私がやりたいことの例ですが、壊れます。 http://jsfiddle.net/eRaB5/2/

構造は次のようになります。

<div id="container">
    <label>Label</label><input type="text' />
</div>

#container{width: 100%;}
label{width: 25%;}
input{width: 75;}

左端と右端が揃うように、値を合計して 100% にする必要があります。入力の境界線のみが入力幅を効果的にしますwidth: 100% +2px;

CSSだけを使用してこの問題を回避する方法はありますか?

Answer 1

負のマージン

負のマージンを設定して試すことができます。

margin: -1px;

私はあなたのjsFiddleでそれらを変更しました、そしてテキストボックスはラベルのすぐ右にジャンプしました。

Answer 2

修理済み：

http://jsfiddle.net/Mutant_Tractor/eRaB5/3/

追加するだけ

margin: -1px;

.input-textクラスに。