0

編集可能な選択メニューを作成しようとしています。これを行うには、選択メニューの上にテキストフィールドを配置します。テストして動作しますが、内の選択メニューの上にテキストフィールドを配置する際に問題が発生します。 、<span>テキストフィールドは、選択範囲以外の場所に配置されます。

<div class="SwitchCol"><span>Editable Select:</span><span><select onchange="$('input#text4').val($(this).val());"> <option>option1</option><option>option2</option><option>option3</option><option>option4</option><option>option5</option></select><input id="text4"/></span></div>

Css

.SwitchCol{
padding:2px 2px 2px 2px;
height:20px;
max-width:100%;
}

.SwitchCol span{
width:140px;
display: inline-block;
}

input{

margin-left: -170px;
width: 140px;
height: 1.2em;

}

select{
width: 175px;
}

ここにjsFiddle

4

1 に答える 1

0

これを実現するには、絶対配置を使用する必要があります。この更新された jsFiddleを参照してください。

CSS:

.SwitchCol {
    padding:2px 2px 2px 2px;
    height:20px; max-width:100%; }  

.SwitchCol span {
    width:140px;
    display: inline;
}  

input {  
    margin-left: -170px;
    width: 140px; height: 1.2em;
    position: absolute;

}  

select {
    width: 175px;
}

leftプロパティとプロパティを使用して、さらに配置することができtopます。そのフィドルでは、使用して完全に完璧に見えます

input {  
    margin-left: -170px;
    width: 155px; height: 1.4em;
    position: absolute;
    left: 276px;
    top: 2px;
}

ただし、ユーザーが選択したオプションはそのようには表示されません。それを本当に修正する方法がわかりません。本当に編集可能な選択は素晴らしいものであり、このSOの質問でそれを行う方法を見つけることができます:

HTML で編集可能なドロップダウンリストを作成するにはどうすればよいですか?

于 2012-11-03T14:59:12.030 に答える