1

私のウェブページの表示を手伝ってください。

下の画像は、上のそれぞれの名前を持つ3つのテキストボックスを示しています。CSSを使用して、CSSを互いに前面に表示する、つまり同じ（単一の）行に表示し、各ヘッダーの中央をボックスに揃えるにはどうすればよいですか？

各ボックスヘッダーはデータベース（php / mysql）から生成され、テキストボックスはヘッダーを生成するループ内に追加されます。

画像

ありがとうございました。

アップデート

これは、この表示を生成するために使用しているコードです

 <form action="<?php echo htmlentities($_SERVER['SCRIPT_NAME']) ?>" method               ="post"> 
           <?php             
          while($row=mysql_fetch_assoc($query)){                       
       echo $row['senatorial']."</br>" ;?>






          <?php  } ;?>
          <input type="hidden" name="action" value="submit" />
                <input type='submit' name='submit' class='OpenInput_Btn' value='Create' title='Register Constituency' />
                </form> 
                <?php  
     }

？>

CSS

.consistuency{
             display: inline;
             margin-left: 90px;
             font-size: 15px;
             font-family: Calibri:
        } 


     label {
            width: 8em;
            float: left;
            display: block;
            font-size: 1.1em;
            color: Beige;
            }
4

2 に答える 2

0

ヘッダーが1行に並んだテキストボックスが必要だと仮定しているので、bfavarettoが言ったように、divを使用してください。

このコードの while ループに div タグを追加します。

  <label for='name'></label>     
          <input type='text' name='constituency' class='OpenInput_Text' />
                 </br>

db テーブルから返される行数が正確にわかっている場合は、div 幅をパーセンテージ (この場合は %30 など) に設定できます。

それ以外の場合は、返された行数を数え、この値を使用して div のパーセンテージ/幅を計算し、インライン css で設定できます。

于 2012-06-20T20:03:38.210 に答える
0

ラベルをそのまま保持したい場合は、各ラベル/フィールドのペアを div でラップし、それらの div にクラス名 (「fieldWrapper」など) を付けて、そのクラスを付けdisplay: inline-block;ます。

.fieldWrapper {
    display: inline-block;
}
于 2012-06-20T19:06:37.187 に答える