web-dev-qa-db-ja.com

入力テキストの自動幅は他の要素がフローティングで100％埋められます

私は次のような検索ボックスのレイアウトを持っています：

<div id="emulating_variable_width">
  <form id="srxForm" method="post">
     <div id="qsrxSearchbar">            
         <div id="scope"> Person Name </div>
         <input type="text" id="theq" title="Search">
         <button id="btnSearch" type="button">Search</button>
      </div>
  </form>    
</div>​

（目的を示すために非常に簡略化されています）

  • 「スコープ」のタイトルは、長さが可変のテキストです

私が好きなのは、検索ボタンを右側に置いたまま、入力テキスト要素をすべての利用可能なスペース（つまり、黄色のスペース）を満たすようにすることです。

CSSの完全な例はなぞなぞです

IE7 +、FF、Safariなどで機能するソリューションを実現する最も簡単な方法はどれですか。

ありがとう！

htmlcsscss-float
16
jmserra

このような？

デモ： http://jsfiddle.net/v7YTT/19/

HTML：

<div id="emulating_variable_width">
   <form id="srxForm" method="post">
       <div id="qsrxSearchbar"> 
           <button id="btnSearch">Search</button>             
           <label id="scope"> Person Name </label>
           <span><input type="text" id="theq" title="Search" /></span>
      </div>
   </form> 
</div>​

CSS：

#qsrxSearchbar
{
    width: 500px;
    height: 100px;
    overflow: hidden;
    background-color: yellow;
}

#qsrxSearchbar input
{
    width: 100%
}

#qsrxSearchbar label
{
    float: left
}

#qsrxSearchbar span 
{
    display: block;
    overflow: hidden;
    padding: 0 5px
}

#qsrxSearchbar button 
{
    float: right
}

#qsrxSearchbar input, .formLine button
{ 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

33
mattytommo

あなたはこのようなものが必要です：

#emulating_variable_width{
    width:500px;

    height:100px;
    background-color:yellow;
}

input {
    width:320px;
    /*width:100%;*/
    float:left;
    font-size: 17px;
}
#scope{float:left;}
button{float:left;}
1
Hardik Mishra

ねえ、このように入力フィールドでフォーカスプロパティを使用できます

Css

    #emulating_variable_width{
    width:500px;

    height:100px;
    background-color:yellow;
}
input {
    width:auto;
    /*width:100%;*/
    float:left;
    width:100px;
    font-size: 17px;
}
#scope{float:left;}
button{float:left;}

input:focus{
width:200px;
}

[〜＃〜] html [〜＃〜]

    <div id="emulating_variable_width">
   <form id="srxForm" method="post">
         <div id="qsrxSearchbar">            
             <div id="scope"> Person Name </div>
             <input type="text" id="theq" title="Search">
             <button id="btnSearch" type="button">Search</button>
          </div>
    </form>    
</div>

ライブデモ http://jsfiddle.net/rohitazad/v7YTT/1/

1
Rohit Azad