2

テキストエリアがあり、いくつかのボタンを常にテキストエリアの下に配置し、テキストエリアの右下隅に揃えたいと思っています。私が得た最も近いものは、このフィドルhttp://jsfiddle.net/leopardy/2uwDT/1/に示され ていますが、テキストエリアに沿って右に完全に整列されておらず、サイズ変更グラバーを介してテキストエリアのサイズを変更するとさらに悪化します右下隅の三角形、およびテキスト領域の右行を右または左に移動すると、ボタンの位置がさらにずれます (テキスト領域の右側からさらに離れます)。1つの注意点は、テキストエリアのサイズを変更できる必要があることです。設定したサイズではできません。

html

<div class="descriptionarea">
    <span class="namefortxtarea">Description</span>
    <textarea ></textarea>
    <span class="buttonfortxtarea"><button class= "btn btn-mini description_edit">Edit</button><button class= "btn btn-mini description_submit">Submit</button></span>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.descriptionarea {
   width: 490px;
   position: relative;
}

.descriptionarea textarea{
    width: 490px;
    height: 20px;
}

.descriptionarea span.namefortxtarea{
    display: block;
    text-align: left;
    font-size:12px;
}

.descriptionarea span.buttonfortxtarea{
    display: block;
    text-align: right;
}
4

1 に答える 1

5

コンテナの厳密な幅を削除してみてください。min-width代わりに a を設定できます。作成した場合、display: inline-blockまたはfloat: left親の幅全体にまたがらないようにすることができます。

http://jsfiddle.net/2uwDT/2/

.descriptionarea {
    min-width: 490px;
    position: relative;
    display: inline-block;
}
于 2013-06-26T20:33:19.280 に答える