HTML中怎么设置按钮的大小?

我在网上看到是这样设置的:
<input type="submit" value="确定" style="height:60px;width:60px;"/>
但是试了一下并没有改变这个按钮的大小,Input不是内联元素吗,不是不能设置宽高的吗?
请问该怎样设置按钮大小?

你这行代码是没有问题的,你可以看下父元素是不是遮住了,

下面看我给你演示一下,这行代码的效果:

代码是完全复制的,效果是有改变的,

没有明显感觉到差异吗?那我吧input的行高改成200,行宽改成200看下

从上面两个实例 ,我们可以看到你这行代码是没有问题的,题主可以把代码单独复制出来,编译即可看到效果,如果单独的效果有改变,那么需要进一步检查其他代码有没有问题,

如果有需要可以追问哦

input:

<input> 标签规定用户可输入数据的输入字段。

根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等

温馨提示:内容为网友见解,仅供参考
第1个回答  2018-06-17

html中设置按钮的大小:可直接给input元素添加宽、高,具体代码如下:

<input type="submit" value="确定" style="width:100px;height:60px">

下面是未设置input按钮大小和设置了按钮大小的对比效果:

html中的表单input元素是内联块状元素,既可以与其它元素在同一行,又可以设置自身的宽度和高度。

如果按照上述方法设置input按钮大小(宽、高),却仍未达到改变input按钮的效果,可检查html中的代码是否有误或者与其它代码相冲突。

拓展资料:

input中的type 属性规定了input 元素的类型,其中属性值submit,定义提交按钮,提交按钮会把表单数据发送到服务器。

<input type="button" /> 定义可点击的按钮,但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。

例子:

效果

源代码:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>input</title>

<style type="text/css">

body{background: #ddd;}

form{margin:0;padding:0;}

form .btn{

width:100px;

height: 40px;

}

</style>

</head>

<body>

<input type="submit" value="确定" style="width:100px;height:60px;">

<input type="submit" value="确定" style="width:100px;height:100px">

<input type="submit" value="确定" >

<form action="form_action.asp" method="get">

<p>Email: <input type="text" name="email" /></p>

<p>Pin: <input type="text" name="pin" maxlength="18" /></p>

<input type="submit" value="提交" class="btn" />

</form>

</body>

</html>

本回答被网友采纳
第2个回答  2015-03-29
<input type="submit" value="确定" style="height:60px;width:60px;display:inline-block;"/>

可以设置成块级内联元素,这样就能设置宽高了。追问

还是不行啊,你看看我写的对吗?

追答

对,效果已经出来了。(红线不是,是截图多截了)

追问

我就纳闷了,在DW里的设计页面中可以看出来效果的,但是在浏览器中没有效果,Safari和Chrome里面都试了,这是怎么回事啊?

追答

所有代码贴出来

本回答被网友采纳
第3个回答  2015-10-12
可以通过样式来设置:
你可先给你的按钮设置一个class,比如:class="btn";
方法有3种:
1.如果有你外链样式表你可以在样式表征
.btn{
width:200px;
height:50px;
}
2.如果没有连接你直接上头部加上
<style type="text/css">
.btn{
width:200px;
height:50px;
}
</style>
3.你可以直接在按钮上加比如:
<button style="width:200px;height:50px;">按钮</button>
第4个回答  2020-02-08
你这行代码是没有问题的,你可以看下父元素是不是遮住了,
下面看我给你演示一下,这行代码的效果:

代码是完全复制的,效果是有改变的,
没有明显感觉到差异吗?那我吧input的行高改成200,行宽改成200看下

从上面两个实例
,我们可以看到你这行代码是没有问题的,题主可以把代码单独复制出来,编译即可看到效果,如果单独的效果有改变,那么需要进一步检查其他代码有没有问题,
如果有需要可以追问哦
input:

标签规定用户可输入数据的输入字段。
根据不同的
type
属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等

html5中怎么设置按钮的宽度和高度
1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。2、在index.html中的<button>标签中,加入样式代码:style="width: 200px;height: 80px;"。3、浏览器运行index.html页面,此时按钮的宽度被设置为200px,宽度被设置为80px。

html5中怎么设置按钮的宽度和高度
1、首先打开html5编辑器,新建一个html文件,在里面写入一个button按钮,被button按钮设置一个样式,这里给它的class属性设置为btn:2、在上方引入style标签,在里面设置btn类的样式,这里设置宽度和高度使用width和height属性就可以了,最后在美化一下按钮,设置背景色和字体颜色以及文字橘子效果:3、最后打...

HTML中怎么设置按钮的大小?
<input> 标签规定用户可输入数据的输入字段。根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等

html的表单按钮怎么改变宽度?
1,直接在元素上定义样式,代码如下:<input type="submit" value="提交" style="width:100px;"\/>2,使用css控制,给按钮添加一个类名,如:<input type="submit" value="提交" class="btn"\/><style> .btn{width:100px;}<\/style> ...

<input type="button" value怎么设置大小
html中设置按钮的大小:可直接给input元素添加宽、高,具体代码如下:<input type="submit" value="确定" style="width:100px;height:60px"> 下面是未设置input按钮大小和设置了按钮大小的对比效果:html中的表单input元素是内联块状元素,既可以与其它元素在同一行,又可以设置自身的宽度和高度。如果...

html button的大小和背景怎么设置
使用css制作,设置按钮大小=图片大小然后background即可:input[type="button"]{width:80px;height:300px;background: url('图片路径') no-repeat;background-size: 100% 100%;}

html中关于css按钮大小设置的问题
你在button里面直接写style..里面就有height,width两个属性,然后就可以设置大小了。

HTML中如何设置button按钮让一个text中的字体变大一号?
\/\/设置按钮上的自体的大小 \/\/[btn setFont: [UIFont systemFontSize: 14.0]]; \/\/这种可以用来设置字体的大小,但是可能会在将来的SDK版本中去除改方法 \/\/应该使用 btn.titleLabel.font = [UIFont systemFontOfSize: 14.0];[btn seBackgroundColor: [UIColor blueColor]];\/\/最后将按钮加入...

button按钮的属性设置?
按钮(Button)是用户界面设计中常见的元素之一,用于触发特定的事件或操作。在HTML、CSS和JavaScript等前端技术中,按钮的属性设置非常关键,它们决定了按钮的外观、行为以及与其他元素的交互方式。按钮的主要属性包括类型(type)、值(value)、样式(style)、大小(size)、禁用状态(disabled)等。这些属性...

dreamweaver里的表单按钮大小怎么改?
1,点该按纽右下角,进行缩放!2,点击该按钮,在属性栏下面改!

相似回答