3

この画像には、同じ要素の 2 つのバージョンが表示されています。上は私が得ているもので、下は私が最終的に得たいものです。もちろん、画像の下部はラベルのテキストとテキストボックスのテキストと並んでいますが、テキストボックスのボックスと並べる必要があります。私はCSSの初心者であり、これまでに試したことは、私を皿から離すことさえできませんでした.

ここに画像の説明を入力

コントロールは次のようにコーディングされます。

<asp:Label ID="TimeTextRequiredLabel" runat="server" Text="*"></asp:Label>
<asp:Label ID="TimeTextLabel" runat="server" Text="Time:&nbsp;"></asp:Label>
<asp:TextBox ID="TimeTextBox" runat="server" ReadOnly="false" Width="100"></asp:TextBox>
<asp:Image ID="TimePickerImageButton" runat="server" BorderWidth="0"
     Width="34" Height="21"  CssClass="TimePickerImage"
    ImageUrl="~/UserControls/Images/ClockPicker.gif" 
    ToolTip="Pick a time." />

CSS の「TimePickerImage」クラスで、左方向にスクーチし、必要な数ピクセルを下に移動するにはどうすればよいですか?

追加するために編集:

最終的に@JuanMendesソリューションとこのクラスに行きました：

<style type="text/css">
    .TimePickerImage {
        position: relative;
        top: .2em;
        right: .3em;
    } 
</style>

これにより、必要な場所にぴったりと収まります。ありがとう！次のタスクは、CSS の学習に真剣に取り組むことです。これまでのところ、私はそれを使ってスクリプトキディをプレイしてきました。

さらに編集して追加:

@MarcAudet と @JuanMendes の両方によって提案された他のすべてのバリエーションを試しましたが、上記のコードが最適に機能します。理論的な「理想」に適合することはあまり気にしないと思いますが、物事を必要なものにします。

4

2 に答える 2

3

vertical-align: bottomの宣言を追加または調整する必要があります#TimePickerImageButton

スクリーンショットから、画像がインライン画像のデフォルトの動作であるテキスト行のベースラインに合わせて配置されているように見えます。

vertical-align垂直方向の配置を処理します。

要素を左に移動するには、調整してみてくださいmargin-left。ただし、入力フィールドには余白がある場合があるため、入力フィールドの余白を確認し、入力フィールドと画像の間に余白があるかどうかも確認してください。

デモ

次の HTML がある場合:

<div class="parent ex2">
    <label for="the-time">Time:</label>
    <input id="the-time" type="text">
    <img src="http://placehold.it/30x25">
</div>

次の CSS を適用します。

.ex2 img {
    vertical-align: bottom;
}

希望のポジショニングが表示されます。

フィドル: http://jsfiddle.net/audetwebdesign/2PkUF/

背の高いラインがある場合...

に大きな値を適用するとline-height: 4.0、要素を行ボックスの下部に配置すると、間抜けに見える場合があります。

どちらが機能するかを試すこともできますvertical-align: text-bottom。

デモの例 3 を参照してください。

于 2013-04-23T21:17:40.283 に答える
1

画像が揃うまで、いつでも値をごまかして画像をごまかすことができます（より良い方法が見つからない場合）http://jsfiddle.net/vTCHW/

FF、IE 8/9、Chrome でテスト済み

img {
    position: relative;
    top: .3em;
}

マークの答えはほぼ十分だとおっしゃいました。それがより良い解決策だと思います。入力からパディング/マージンを削除することで、3 つすべてを正しく並べることができます。http://jsfiddle.net/vTCHW/1/多くの人が、マージン/パディングを処理するCSS リセット システムを使用していることに注意してください。

img {
    vertical-align: bottom;
}

input {
    padding: 0;
    margin: 0;    
}
于 2013-04-23T21:37:53.333 に答える