0

複数の行を持つフォームを作成しようとしています。各行には、オプションの入力フィールドとそれに続く必須ボタンがあります。ボタンは垂直に並んでいる必要があります-次のようになります：

_____________  _______________
|  input 1  |  |   button 1  |
|___________|  |_____________|
               _______________
               |   button 2  |
               |_____________|

固定の左マージンでボタンを左にフロートさせようとしましたが、そうすると、入力フィールドがマークアップの最初に表示されていても、入力フィールドがボタンの右側に移動します。

<div>
    <input type="text">
    <button>Action 1</button>
</div>

ここで私のjsfiddleを参照してください。なぜこれが起こっているのですか、そして正しい解決策は何ですか？

4

6 に答える 6

0

行を使用します。

<div class="row-rap">
    <div class="right">
        <input type="text">
    </div>
    <div class="left">
        <input type="button" value="Action 1">
    </div>
</div>
<div class="row-rap">
    <div class="right">
        <input type="text">
    </div>
    <div class="left">
        <input type="button" value="Action 2">
    </div>
</div>​

以下のスタイリングで。

div.row-rap {
    width: 100%;
}
div.row-rap .right, div.row-rap .left {
    width: 50%;
    float: left;
}
于 2012-12-26T00:28:45.967 に答える
0

このjsFiddleに示すように、これを行うにはdivコンテナが必要です。

HTMLコード

<div class="container">
    <div class="left">
        <button>
    </div>
    <div class="right">
        <button>
    </div>
</div>

CSSコード

.container {
    width: 190px;
    height: 22px;
    margin: 0;
}

.left {
    float: left;
    width: 95px;
    height: 22px;
}

.right {
    float: right;
    width: 95px;
    height: 22px;
}

</ p>

于 2012-12-26T00:31:04.377 に答える
0

別の方法として、余白と色を変更する必要がある場合があります。サンプル結果については、jsfiddleリンクを参照してください。

各行のdivに、左揃えのラベルと右揃えの入力（ボタンスタイル）があります。「空のラベル」を表すspan要素のプレースホルダーとして、改行しないスペースが必要です。

http://jsfiddle.net/qallar/kfgCb/5/

htmlは次のとおりです。

<div class='line'>
  <span class='formlabel'>label 1</span>
  <input class='formbutton' type='button' value='button 1 text ' />
</div>

<div class='line'>
  <span class='formlabel'>&nbsp;</span>
  <input class='formbutton' type='button' value='button 2 text' />
</div>

およびcss：

.line
{
  display: block;
  background-color: #ddd; /* also try #fff */
  margin: 0px;
  padding: 2px;
  height: 30px;
  width: 200px;    
}

.formlabel
{
  float: left;
  background-color: #eee; /* also try #fff */
  margin: 0px;
  padding: 2px;
  width: 75px;
  height: 100%;
  clear: both;    
}

.formbutton
{
  float: right;
  background-color: #0f0;
  margin: 0px;
  padding: 0px;
  width: 100px;
  height: 100%;    
}
于 2012-12-26T03:03:41.883 に答える
0

入力フィールドはインライン要素であるため、ボタンの右側に飛んでいます。フロートはブロック要素でのみ機能し、インライン要素は常にフロート要素の周りを流れます。これは、元のjsFiddleの動作を説明しています。

そうは言っても、input要素にdisplay：blockを配置しても、インラインのように動作します。でも、基本的なコンセプトをdivで機能させることができました。これは、真のブロック要素です。ここでjsFiddleを参照してください。

<div class="row">
    <button>Action 1</button>
    <div class="in"></div>
</div>

.row {
    clear: both;
}

.in {
    background-color: green;
    height: 24px;
    width: 100px;
}

button {
    float: left;
    margin-left: 110px;
    width: 150px;
}

唯一の回避策は、Musa（このjsFiddleを参照）が提供するもののようです。Musaは、text-alignを使用してボタンを右に揃え、divの幅を制限します。

于 2012-12-26T06:28:27.217 に答える
0

私はCSSの専門家ではなく、通常、このタスクはテーブルを使用して機能します

<table>
<tr><td>Optional Input</td><td>Button</td></tr>
<tr><td>Optional Input</td><td>Button</td></tr>
</table>

何らかの理由でテーブルがオプションでない場合は、div/spanを使用できます

<div style="display: table-row">
<span style="display: table-cell">Optional Input</span>
<span style="display: table-cell">Button</span>
</div>

こんな感じになります

ここに画像の説明を入力してください

于 2019-06-03T17:38:31.663 に答える
-1

ブロックフォーマットコンテキストの使用https://developer.mozilla.org/en-US/docs/CSS/Block_formatting_context

jsfiddleコード：http ：//jsfiddle.net/EeNFH/9/

htmlコード：

<div class="inp">
    <input type="text">
</div>
<div class="btns">
    <p><button>Action 1</button></p>
    <p><button>Action 2</button></p>
</div>

とスタイル：

input {
    width: 100px;
}

button {
    width: 150px;
}

.inp{
    float:left;
}

.btns{
    overflow:hidden;
}
​
于 2012-12-26T03:15:48.110 に答える