display:block与display:inline-block在input中的使用区别

最新推荐文章于 2022-11-24 17:21:21 发布
置顶 最新推荐文章于 2022-11-24 17:21:21 发布
阅读量7.5k 收藏
点赞数
分类专栏： html相关 文章标签： input generator html javascript button function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hotdogcug/article/details/1767563
版权

 inline:内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行
display:inline-block; 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内
display:block; 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行

举例说明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script language="JavaScript">
  function clickbutton(){
 if (document.all.showBill.value=="查询")
 {
  document.all.address.style.display="inline-block";
  document.all.showBill.value="隐藏";
 }else{
  document.all.showBill.value="查询";
  document.all.address.style.display="none";
 }
}
  </script>
 </HEAD>
 <BODY>
   <form>
      <table>
        <tr>
           <td nowrap>
               <input name="name" type="text" >
               <input name="address" type="text" style=display:"none">
           </td>
        </tr>
        <tr>
            <input name="showBill" class=btn1 type="button" value="查询" onClick="clickbutton();">
        </tr>

      </table>
    </form>
 </BODY>
 </HTML>

hotdogcug
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于css display: inline block inline-block的区别分析
09-25
`display: inline-block` 在设计响应式布局、导航菜单、图标列表等场景中尤其有用，因为它允许元素在一行内紧密排列，同时保持块级元素的尺寸控制特性。因此，掌握 `display: inline`、`display: block` 和 `display...
Input标签的样式设置
qq_44709970的博客
09-23 2558
在input插入iconfont,在input中使用精灵图,input复选框设置边框颜色
display:inline inline-block block
zzzley的博客
11-24 926
display：block，inline，inline-block
css----display样式属性
My_liuying0901
05-19 301
display样式属性 设置元素生成的框的类型，该属性有多个值： 可以通过display样式属性实现行级元素和块级元素互相转换以实现换行或使用块级元素才有的CSS样式。 块级元素---->行级元素，代码如下： <div style="border:1px solid red ; display: inline;" >郑州大学</div> &l...
CSS+DIV让文字内容居中___display:inline、block、inline-block的区别
jzgl_cadn的专栏
09-19 387
[code="HTML"] Untitled Document vertical-align:middle; } --> teststsetsetsetdisplay:inline-block; [/code] [b]display:block就是将元素显示为块级元素. [/b]　　 block元...
display属性
奔跑8蜗牛
05-26 1613
一、display属性 none block inline inline-block inherit 二、display:none none这个值表示此元素将不被显示 三、display:block 使用了display：block;之后， 此元素将显示为块级元素，此元素前后会带有换行符。 标准文档流：简称标准流，指的是在不使用其他的与排列和定位相关的css规则时，各种元素的排列规则。 块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个...
display和visibility的区别示例介绍
11-30
如果将 `display` 更改为 `block` 或 `inline`，元素将会重新出现在布局中，并根据设置的类型占据相应空间。 其次，`visibility` 属性则仅控制元素是否可见，不会影响元素的布局。当 `visibility` 设置为 `hidden` ...
css块状元素与内联元素以及inline-block
11-06
CSS 中的块状元素（Block Elements）和内联元素（Inline Elements）是两种基本的元素类型，它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素的区别在于它们的显示方式和布局特点。 一、块状...
使用vertical-align实现input和img对齐
12-14
它适用于`display`值为`inline`、`inline-block`、`table-cell`、`table-column`、`table-row`、`table-caption`、`inline-table`的元素。在HTML中，`<input>`和`<img>`默认都是行内元素，因此`vertical-align`属性...
display属性介绍和使用
11-26
* 设置导航菜单：可以使用 `display: inline-block` 将导航菜单项设置为内联块元素，从而实现水平排列。 * 实现弹性布局：可以使用 `display: flex` 将容器设置为弹性布局，从而实现子元素的弹性排列。 * 实现网格...
css中display:block;的用法及适用标签详解
12-13
对所有的块元素都没有意义，块元素的dispaly属性默认值为block，没必要再显式定义——除非你之前对块元素的display属性重新定义过。 display：block；比较常用于<a><span>这两个标签——因为这两个标签非块元素，如果不用display：block定义一下，那么定义width、height等和长宽相关的css属性时会发现完全不生效。 通常情况下div里就没有必要写display：block；特殊情况：之前曾对div设置过display：hidden；需要写display：block；
关于input元素 和display:inline-block 的元素不在一水平线上的一点发现
acknowledged的博客
08-31 8254
每次用到了 元素 和inline-block的（不一定是span，其他一些inline的元素也是一样）元素，他们总是会不在一个水平线上，有时候用浮动可以解决。 但是有的时候并不想用浮动解决，这时候可以用vertical-aline来实现。 在W3School中，对于 vertical-aline 的介绍是：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。 也就是说，我在这个元素
layui-input-block和layui-input-inline的区别
sunsineq的专栏
07-09 6396
layui-input-block：是一个表单元素占一行，竖着，以例表的形式排列。 layui-input-inline：多个表单控件占一行，横着，一行可以放置多个表单元素。
2020.0327知识总结
weixin_46579829的博客
03-27 102
知识总结 一、元素类型的转换： Display属性： Block Inline None Inline-block List-tiem （1）大部分块状元素默认的display值都是block，其中li默认的值是list-item。（列表元素） （2）大部分内联元素默认的display值是inline，其中input默认的值是inline-block（行内块元素） 内联元素中最特殊的一个：行内块元...
python 实现模式鼠标和键盘输入的同时，禁止外部鼠标和键盘命令输入
Weeds的博客
08-16 6313
一、user32下的blockinput方式实现禁止外部命令输入 python代码(使用user32下的方式blockinput方式禁止外部命令输入)： #coding=utf-8 from ctypes import * import time #Block All Input windll.user32.BlockInput(1) #模拟鼠标操作 windll.user32.SetC...
Layui框架表单布局【每行一个，两个，三个input输入框】教程
yu980219的博客
09-02 1万+
这里写自定义目录标题欢迎使用Mar# 系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Mar# 系列文章目录 提示：这里可以添加系列文章
display:block详解
热门推荐
路漫漫~
03-24 14万+
1、每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。 2、块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；      行内元素 ： 自己的独立空间，它是依附于
display:inline-block属性的标签出现的问题及解决方法
奋斗小强的博客
07-24 1万+
1，首先说明display:inline-block可以让块级元素并排显示，但是需要注意一些问题，如下； 1、有些标签是默认的inline-block属性，例如img 和input，这些标签称为行内块标签 1.对于img标签会出现白边问题，如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta ch...
input设置为hidden或者display:none或者visibility:hidden后无法获取里边的值
changyana的博客
09-14 5160
input设置为hidden或者display:none或者visibility:hidden后无法获取里边的值 近两天一直在被一个小问题困扰，不想让一个input框显示，但是设置hidden或者display:none或者visibility:hidden之后在JavaScript里又无法监控到该文本框的value值变化。后来偶然翻到一篇文章，于是实现啦 就是这个opacity: 0; 设置透明度为0 关于visibility：hidden和opacity: 0，虽然都是显示看不见，但是差距还是挺大
如何使用label { display: inline-block; margin-bottom: 0.5rem; }
最新发布
07-13
display: inline-block; margin-bottom: 0.5rem; } ``` 这会使label元素以内联块级元素的方式显示，并且在下方留出0.5rem的边距。 3. 确保将CSS文件链接到HTML文件。你可以通过在HTML的`<head>`标签内使用`<link>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值