2

私のウェブサイトtjsoldit.comのフロントページにホーム検索フォームがあります。フォームは私がコーディングしたものではなく、私の家探しの不動産会社から提供されたもので、フォームを呼び出す 2 行のスクリプトを挿入して埋め込みました。フォームのさまざまな要素の css クラスが提供されているため、カスタム css シートでフォームにいくつかのカスタム css ルールを設定することしかできません。フォームは、すべての検索フィールドとそれに一致するラベルの行を含むテーブルにレンダリングされます。フォームの構造はhttp://tjsoldit.com/wp-content/uploads/2013/02/4-columns.jpgで確認できます。

構造からわかるように、ボタンはフォームの最初の列の要素です。私が望むのは、ボタンがその行の水平方向の中央に来るようにボタンを中央に配置することです(列2の下のほぼ半分と列3の下の半分)。display:inline;などのすべての表示プロパティを試しdisplay:tableましたが、できませんでした。助けてください。

検索ボタンの css クラスは: .ds-quick-search-button、フォーム フィールドの.ds-quick-search-nameクラスは 、フィールド値のクラスは.ds-quick-search-nameです。フォームの構造についての詳細は、ここで読むことができます: www.diversesolutions.com/design-tips/idx-quick-search-styling -ガイド-6744

注: 埋め込みコードのみが提供されます。したがって、htmlを変更することはできません。そのcssで遊ぶことができます。

4

2 に答える 2

3

追加colspan="4"（4つのセルのマージ）とalign="center"

<tr>
<td colspan="4" align="center">
<input type="button" value="Search" class="ds-quick-search-button">
</td>
</tr>

また

テーブルに外部divを作成し、外部divにテーブルスタイルを追加して、パディング値を増やしますpadding: 6px 24px 36px 24px;

これを追加してみてください

.ds-quick-search tr:last-child input{margin:2% 0 0 25%; position:absolute; }

デモ2

列1と2の間および3と4の間にスペースを与えるため

.ds-quick-search td:first-child{padding-right:15px}
.ds-quick-search td:nth-child(3){padding-right:15px}
于 2013-02-05T09:43:10.267 に答える
0

50%次のように、ボタンのマージンを設定します。

.ds-quick-search-button { 
   margin-left:50%;
}
于 2013-02-05T09:42:20.317 に答える