入力されたデータを送信するための「送信ボタン」を画像付きのボタンのコードを書いているのですが、付属画像のように、ボタンの大きさが横一杯に広がって灰色のようになって、しまうのですが、ボタンの大きさの縦幅と横幅の大きさを調節しても、適応されず困っています。ボタンの画像自体の大きさは適応できています。困っています。コードは以下にあります。 /* 送信ボタンの位置 */ .auto-style3 { text-align: center;/* 送信ボタンを中央に配置 */ } /* 送信ボタンの代替画像位置 */ .auto-style4 { text-align: center;/* 画像を中央に配置 */ margin-top:87px ;/* 画像の上の余白 */ } /* 画像の大きさ調節 */ img.example8 { width: 50%; height: 100px;

入力されたデータを送信するための「送信ボタン」を画像付きのボタンのコードを書いているのですが、付属画

解決済

質問者：pjdmgam
質問日時：2021/06/23 15:58
回答数：1件

入力されたデータを送信するための「送信ボタン」を画像付きのボタンのコードを書いているのですが、付属画像のように、ボタンの大きさが横一杯に広がって灰色のようになって、しまうのですが、ボタンの大きさの縦幅と横幅の大きさを調節しても、適応されず困っています。ボタンの画像自体の大きさは適応できています。

困っています。

コードは以下にあります。

<!DOCTYPE html>

<html>

<head>
<meta content="text/html; charset=utf-8"/>

<title></title>
<link rel="stylesheet" href="senden.css">

<style type="text/css">

/* 送信ボタンの位置 */

.auto-style3 {
text-align: center;/* 送信ボタンを中央に配置 */

}
/* 送信ボタンの代替画像位置 */
.auto-style4 {
text-align: center;/* 画像を中央に配置 */
margin-top:87px ;/* 画像の上の余白 */

}

/* 画像の大きさ調節 */
img.example8 {
width: 50%;
height: 100px;

</style>
</head>
<body>

<form action="form1.php" method="post">

<div class="enter">

<button type="submit" name ="submit" class="auto-style4" height="70px" width="40px">
<img src="senden15.png" alt="確認画面へ" class="example8"/></button>
</div>

</form>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2021/06/23 18:44

こんばんは

＞ボタンの大きさの縦幅と横幅の大きさを調節しても、適応されず困っています。
サイズを指定していないからでは？

どういうサイズにしたいのかわかりませんけれど、CSSで
　.auto-style4 { width:100px; height:50px; }
などとしておけば、そのサイズで表示されます。

画像がはみ出るのが嫌なら、
　overflow: hidden;
なども。