1

やあみんな私は現在、テキストボックス、選択メニュー、ボタンをすべて1つのサイズのdivにきれいに入れようとしていますが、各要素に奇妙な境界線/マージンがあり、適切にレンダリングできないという問題に遭遇しています(ボタンはテキストボックスの下に表示され、メニューを選択）

Heresは、私が現在使用しているhtmlです

<div class="content">
    <div class="search-panel">
        <div class="search-panel-logo">
            <img src="img.png" class="search-panel-logo-img" />
        </div>

        <div class="search-panel-searchbar">
            <form class="search-panel-frm" action="" id="fsearchbar">
                <input class="search-panel-frm" type="text" id="tseachtext" name="tsearchtext" value="Search" />
                <select class="search-panel-frm" id="ssearchselect" name="ssearchselect">
                    <option value="Cars">Cars</option> 
                </select>
                <input class="search-panel-frm" type="button" id="bsearchgo" name="bsearchgo" value="Search!" />
            </form>

        </div>
    </div>
</div>

CSSは次のとおりです。

.content {
    background:inherit;
    width:950px;
    height:600px;
    margin: 0 auto;
}

.search-panel {
    width:inherit;
    height:500px;
    background:#093;
    margin:0 auto;

}
.search-panel-searchbar {
    width:inherit;
    height:30px;

}

.search-panel-searchbar-frm {
    width:inherit;
    height:inherit;

}

.search-panel-searchbar-frm-text {
    width:60%;
    height:70%;

}

.search-panel-searchbar-frm-select {
    width:20%;
    height:80%;

}

.search-panel-searchbar-frm-go {
    width:20%;
    height:80%;

}

すべての要素を 2 行ではなく 1 行に表示するために何を追加できるかについて、私はすでに試しました

border:0;
margin:0;

問題は解決しませんでした。

4

3 に答える 3

0
  1. 投稿したHTMLに適用されないCSSクラスを投稿しました（例.search-panel-searchbar-frm-go）
  2. クラスsearch-panel-frmを、フォーム要素とフォーム内の要素に適用します。これがあなたが望むものであると確信していますか？
  3. 同じ問題は発生していません。input、select、input：buttonがすべて同じ行に表示されます。

この簡単な修正を追加して、すべてを1行にまとめて、アイデアを得ることができます。

.search-panel-frm *
{
 white-space:nowrap;
}

すべての要素がすでに同じ行にあり、それらをより適切に並べたい場合は、次のように、vertical-alignにさまざまな値を試してください。

.search-panel-frm *
{
 vertical-align:top;
}
于 2012-05-19T23:21:36.123 に答える
0

目標を達成するには、いくつかの CSS トリックを適用する必要がありました。以下の CSS を参照してください。

CSS

/* wrapper */
.search-panel-searchbar {
    width: 100%;
    height: 30px;
    overflow: hidden;
}

/* form elements must be wrapped and not a direct child of the form tag */
.search-panel-searchbar > form > div {
    background-color: #fff;
    width: 100%;
    height:30px;
}

/* input[type="text"] */
.search-panel-searchbar-frm-text {
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 16px;
    height: 16px;  /* necessary to fix height issue on windows browsers */
    padding: 6px 0;
    display: block;
    border: 1px solid #ccc;
    background-color:#fff;
    width: 60%;
    text-indent: 4px;
    float: left;
}

/* select */
.search-panel-searchbar-frm-select {
    margin: 0;
    padding: 0;
    font-size: 12px;
    height: 30px;
    padding: 6px 4px;
    display: block;
    border: 1px solid #ccc;
    background-color:#fff;
    width: 20%;
    float: left;
    margin-left:-1px; /* pull to prevent border overflow issue with % */
}

/* input[type="button"] */
.search-panel-searchbar-frm-go {
    margin: 0;
    padding: 0;
    font-size: 12px;
    height: 30px;
    padding: 6px 0;
    display: block;
    border: 1px solid #ccc;
    background-color:#fff;
    width: 20%;
    float: left;
    text-align:center;
    margin-left:-1px; /* pull to prevent border overflow issue with % */
    cursor: pointer;
}

ノート：

CSS には、ボタンのホバーやボディの背景など、Fiddle の例で視覚的なデモンストレーションに指定されたスタイルは含まれていません。

残念ながら、各ブラウザー (および OS!) は異なる方法で を処理することに注意してくださいselect。1 つまたは 2 つのブラウザーでは、スタイルが異なる可能性があります。

実用的なフィドルの例!

ここに画像の説明を入力

スクリーン ショットは、以下で実行されたテストと一致します。

Linux Ubuntu 12.04

  • Firefox 12.0
  • Chromium 18.0.1025.151 (開発者ビルド 130497 Linux)

Windows XP Professional バージョン 2002 Service Pack 3

  • Internet Explorer 8.0.6001.18702
  • オペラ 11.62
  • Firefox 3.6.16
  • Safari 5.1.2 (選択ボックスの高さのみ失敗)
  • Google Chrome 18.0.1025.168m
  • K-Meleon 1.5.4 (font-family による失敗)

Windows 7 ホーム エディション サービス パック 1

  • Internet Explorer 9.0.8112.164211C
  • オペラ 11.62
  • Firefox 12.0
  • サファリ5.1.4
  • Google Chrome 18.0.1025.168m

使用font-familyする には、行の高さとテキスト サイズの問題を防ぐために、最後にフォント ファミリ宣言を含める必要があります。例えば、font-family: Helvetica, Arial, sans-serif

于 2012-05-20T01:39:58.223 に答える
0

要素間の空白を削除します。

また、使用することwidth: inheritはおそらく良い考えではありません-width: 100%代わりに試してみるか、それらの線に沿って何かを試してください. height: inheritで置き換えることができますheight: auto;(または単に省略できます)。

于 2012-05-19T19:39:09.663 に答える