HTML + CSS。ボタンの上に水平線を配置するにはどうすればよいですか?

長いです

私はiOSと3Dの開発者で、Web開発の仕事をしています。HTML / CSS / JSでは、ボタンの上に水平線を配置するという、些細なことだと思っていたことが不可能であることがわかりました。

これが背景画像付きの私のボタンです:

<button id="myButton" style="background-image: url(assets/cursor-filter-thumbnail.png);" class="igv-filter-button" data-toggle="modal" data-target="#myDataTarget">
</button>

CSSは次のとおりです。

.igv-filter-button {
    position: absolute;
    width: 128px;
    border:none;
    padding: 0;
    height: 100%;
    background: none;
}

次に、JSを使用してプログラムで上下に移動する、このボタンの上に水平線を配置します。誰かが私を啓発することができますか?

レスリーオプション

1)ここに示すように、ボタンの周りにコンテナを置きます

<span class='linestyle'>
<button id="myButton" style="background-image: url(assets/cursor-filter-  
thumbnail.png);" class="igv-filter-button" data-toggle="modal"   
data-target="#myDataTarget">
</button>
<span>

2)CSSスタイルのボーダートップをスパンコンテナに追加します

 .linestyle { border-top:1px solid black;}

3)ボタンにパディングトップを追加します。

.igv-filter-button    { padding-top:1px;}

4)ボタンのパディングをプログラムで調整します。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ボタンをhtml5の中央に配置するにはどうすればよいですか?

分類Dev

このHTMLボタンを中央に配置するにはどうすればよいですか

分類Dev

HTML + CSS:この2つのボタンを垂直方向に同じレベルに配置するにはどうすればよいですか

分類Dev

画像に多くのラジオ ボタンを配置するにはどうすればよいですか? (HTML、CSS)

分類Dev

htmlのテーブルの水平線を削除するにはどうすればよいですか?

分類Dev

iPhoneのように、HTMLテキスト入力ボックス内にクリアボタンを配置するにはどうすればよいですか?

分類Dev

HTMLリンクをボタンのようにするにはどうすればよいですか?

分類Dev

HTML / CSSボタンアイコンを削除するにはどうすればよいですか

分類Dev

CSSを使用してHTMLボタンを強調表示するにはどうすればよいですか?

分類Dev

HTMLとCSSで別のWebサイトにリンクするボタンに自分の画像を追加するにはどうすればよいですか?

分類Dev

アイコンを左に揃え、テキストをHTMLボタンの中央に配置するにはどうすればよいですか?

分類Dev

HTMLで、ボタン内にボタンを作成するにはどうすればよいですか

分類Dev

HTML / CSS:フッターのボックスを作成するにはどうすればよいですか?

分類Dev

曲線ボックスのhtmlとcssに垂直線の分割と凡例を追加するにはどうすればよいですか?

分類Dev

HTMLで1つの画像を別の画像の上に配置するにはどうすればよいですか?

分類Dev

HTMLで1つの画像を別の画像の上に配置するにはどうすればよいですか?

分類Dev

HTMLで1つの画像を別の画像の上に配置するにはどうすればよいですか?

分類Dev

cssを使用してHTML文字に境界線の色を追加するにはどうすればよいですか?

分類Dev

ionic HTMLモバイルUIのログインフォームで水平線を非表示にするにはどうすればよいですか?

分類Dev

htmlとcssの要素の周りの境界線を削除するにはどうすればよいですか?

分類Dev

HTMLでテーブルの下隅にボタンを配置するにはどうすればよいですか?

分類Dev

JavascriptでHTMLボタンのonclickを変更するにはどうすればよいですか?

分類Dev

jQuery-このボタンのhtml()をリセットするにはどうすればよいですか?

分類Dev

apとタグをhtmlにインラインで配置するにはどうすればよいですか?

分類Dev

画像のグループをHTML / CSSの中央に配置するにはどうすればよいですか?

分類Dev

HTMLボタンをレンダリングする前にHTMLボタンの表示を変更するにはどうすればよいですか?Rails

分類Dev

HTML / CSS:テキストの境界線を画像に合わせるにはどうすればよいですか?

分類Dev

HTMLボタンのサイズを変更するにはどうすればよいですか?

分類Dev

HTML + CSSで異なるリストの要素を配置するにはどうすればよいですか?

Related 関連記事

  1. 1

    ボタンをhtml5の中央に配置するにはどうすればよいですか?

  2. 2

    このHTMLボタンを中央に配置するにはどうすればよいですか

  3. 3

    HTML + CSS:この2つのボタンを垂直方向に同じレベルに配置するにはどうすればよいですか

  4. 4

    画像に多くのラジオ ボタンを配置するにはどうすればよいですか? (HTML、CSS)

  5. 5

    htmlのテーブルの水平線を削除するにはどうすればよいですか?

  6. 6

    iPhoneのように、HTMLテキスト入力ボックス内にクリアボタンを配置するにはどうすればよいですか?

  7. 7

    HTMLリンクをボタンのようにするにはどうすればよいですか?

  8. 8

    HTML / CSSボタンアイコンを削除するにはどうすればよいですか

  9. 9

    CSSを使用してHTMLボタンを強調表示するにはどうすればよいですか?

  10. 10

    HTMLとCSSで別のWebサイトにリンクするボタンに自分の画像を追加するにはどうすればよいですか?

  11. 11

    アイコンを左に揃え、テキストをHTMLボタンの中央に配置するにはどうすればよいですか?

  12. 12

    HTMLで、ボタン内にボタンを作成するにはどうすればよいですか

  13. 13

    HTML / CSS:フッターのボックスを作成するにはどうすればよいですか?

  14. 14

    曲線ボックスのhtmlとcssに垂直線の分割と凡例を追加するにはどうすればよいですか?

  15. 15

    HTMLで1つの画像を別の画像の上に配置するにはどうすればよいですか?

  16. 16

    HTMLで1つの画像を別の画像の上に配置するにはどうすればよいですか?

  17. 17

    HTMLで1つの画像を別の画像の上に配置するにはどうすればよいですか?

  18. 18

    cssを使用してHTML文字に境界線の色を追加するにはどうすればよいですか?

  19. 19

    ionic HTMLモバイルUIのログインフォームで水平線を非表示にするにはどうすればよいですか?

  20. 20

    htmlとcssの要素の周りの境界線を削除するにはどうすればよいですか?

  21. 21

    HTMLでテーブルの下隅にボタンを配置するにはどうすればよいですか?

  22. 22

    JavascriptでHTMLボタンのonclickを変更するにはどうすればよいですか?

  23. 23

    jQuery-このボタンのhtml()をリセットするにはどうすればよいですか?

  24. 24

    apとタグをhtmlにインラインで配置するにはどうすればよいですか?

  25. 25

    画像のグループをHTML / CSSの中央に配置するにはどうすればよいですか?

  26. 26

    HTMLボタンをレンダリングする前にHTMLボタンの表示を変更するにはどうすればよいですか?Rails

  27. 27

    HTML / CSS:テキストの境界線を画像に合わせるにはどうすればよいですか?

  28. 28

    HTMLボタンのサイズを変更するにはどうすればよいですか?

  29. 29

    HTML + CSSで異なるリストの要素を配置するにはどうすればよいですか?

ホットタグ

アーカイブ