CSS-button添加display:block;属性后自动换行！

最新推荐文章于 2024-09-29 20:42:21 发布
最新推荐文章于 2024-09-29 20:42:21 发布
阅读量2.4k 收藏 1
点赞数 1
分类专栏： # CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dalei9243/article/details/104770104
版权 
原因：display: list-item; 和 display: block;一样都是独占一行(可以设置宽高，不会换行!)。
解决办法：设置display: inline-block;

 

大雷！
关注
专栏目录
JS处理Button的隐藏与显示
weixin_33928137的博客
01-08 2万+
Html中Button的display属性控制着此Button的隐藏与显示功能，当display=="none"的时候是隐藏，display==“block”的时候是显示；并且display是存在于style中的。在Html中进行display属性的设置，请看如下代码： <div> <button id="displayBtn" sty...
CSS diaplay=“grid“未生效与display:block
Nie2014的博客
07-12 1620
1、CSS grid可以通过嵌套生成更灵活的页面布局。 参考博客值得收藏的css grid构建复杂布局的小技巧！中代码示例 <p class="container"> <p class="item">One</p> <p class="item">Two</p> <p class="item">Three</p> <p class="item inner-grid"> <p clas
超出文本出现省略号
qq_50962973的博客
09-13 184
CSS超出文本出现省略号 p{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } p要有宽度 这样文字超出那个宽度就自动省略出现… 多行 overflow: hidden; white-space:nowrap; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //行数 -webkit-box-orient: vertical; //
CSS 按钮
冷月醉雪的博客
06-16 4206
基本按钮样式 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;自学教程(如约智惠.com)&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; .button { background-color:#4CAF
CSS中的display属性详解
LanJason的博客
09-29 360
display属性是CSS中的重要属性之一，主要用于控制元素的显示方式及其在文档流中的表现。不同的取值会影响元素的显示方式、布局特点，以及它与其他元素的交互方式。以下是一些常见的display属性值及其作用。
display换行
weixin_42017221的博客
02-08 709
【代码】display换行。
css换行
weixin_43845059的博客
08-30 577
css自动换行
css中display:block;的用法及适用标签详解
12-13
此外，在使用浮动布局（float layout）时，清除浮动后，有时也需要重置`display`属性为`block`来恢复元素的正常流布局。 总之，`display: block;`是一个非常灵活的CSS属性，它可以改变元素的显示方式，使其适应各种...
css Table布局-display:table
qq_35396397的博客
11-22 798
使用表格布局一直是一个敏感的主题。一般情况下，Web开发人员考虑基于表格布局是禁忌。 尽管反对的理由看起来证据很充分，但是大多数开发者除了谴责基于表格的布局，都无法提供完善的使用场景。 “表格不好。” 从早期反对HTML Table（<table>标签）开始这种势头就非常强劲。 几代开发者被成功洗脑，根深蒂固的认为：任何使用表格都是邪恶的。 诚然，我也是避免使用...
CSS-sliding-multi-level-accordion:CSS滑动多级手风琴
04-29
**CSS滑动多级手风琴详解** 在网页设计中，滑动多级手风琴是一种常见的交互元素，尤其在导航菜单、内容展示和信息组织等方面广泛应用。它以节省空间和提升用户体验为特点，允许用户逐级展开和收起内容。本教程将...
Neon-Button:使用HTML和CSS创建霓虹灯按钮
03-10
通常，我们可以使用`<button>`标签来创建按钮，然后为其添加自定义类名，以便于在CSS中进行样式设置。例如： ```html <button class="neon-button">霓虹灯按钮</button> ``` 接下来，我们将在CSS中为这个霓虹灯...
CSS属性display的用法 display=""
yansong_8686的专栏
02-22 1340
display是设置元素的浮动特征，要区别visibility属性（visibility="visible|hidden"来表示(visible表示显示，hidden表示隐藏)）是隐藏元素但保持元素的浮动位置 (即两者最大的区别是：当display设为none这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上;而visibility设成hidden时元素虽然被隐藏了，但它仍然占据它原
【CSS】display 属性
小秀的博客
07-24 761
将元素呈现为内联块级元素。内联块级元素在一行内排列，并可以设置宽度和高度等样式，类似于块级元素。：将元素呈现为块级元素。块级元素会独占一行，并且会在行与行之间创建一个新的换行空间。：将元素呈现为弹性容器。弹性容器允许子元素通过弹性布局进行排列和对齐。常见的用于构建响应式布局的属性。：将元素呈现为网格容器。网格容器允许子元素通过网格布局进行排列和对齐。：将元素呈现为内联元素。内联元素不会独占一行，而是在一行内尽可能地排列。属性，我们可以控制元素在页面中的排列和布局，实现不同的页面结构和样式效果。
使用css完成容器内内容的自动换行排列
weixin_42601608的博客
02-13 1640
使用 CSS 完成容器内内容的自动换行排列可以使用 display: flex 和 flex-wrap: wrap 属性。 首先，将容器的 display 设置为 flex： .container { display: flex; } 然后，将 flex-wrap 设置为 wrap： .container { display: flex; flex-wrap: wrap; } ...
display:blocK 导致的换行
狂徒技术分享
04-03 1417
#divHeader #divNav #divLogo{margin-right:5px; width:205px; height:72px; float:left;position:relative;}#divHeader #divNav #divLogo a:link, a:visited,a:hover,a:active{width:200px; height:67px;text-decor...
CSS-display样式属性
paku-san的博客
05-19 1302
display样式属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> a{ border: 1px solid red; text-decoration: none; ...
css之旅（二）css display属性
letianxf的博客
07-12 239
本文主要介绍css的display属性以及常用的属性值。 一、inline <!DOCTYPE html> <!DOCTYPE html> <html> <head> <style> .test{ display: inline; width: 200px; height: 200px; background: yellow; padding: 50px; border: solid 1px black;
css弹性盒display:flex；如何实现超出换行
百变鹏仔工作室
01-24 2858
属性来实现超出换行，该属性用于设置是否换行，默认情况下，它的值为。让子元素在一行排列不下时自动换行。在CSS弹性盒布局中，可以使用。，实现自动换行效果。，即不换行，可以将其设置为。使其成为弹性盒布局，再设置。
display 、float 、position的关系 display作用是什么?display:inline-block会不会显示间隙？行内元素float:left后是否变为块级元素？flex 布局
星辰迷上大海的博客
01-03 2191
使用Flex布局可以轻松实现响应式设计、等高布局、对齐等复杂的布局需求，比传统布局方式更加灵活方便。
vue 全局设置隐藏滚动条::-webkit-scrollbar { display: block !important; }，但在某个分页中需要显示滚动条
最新发布
10-16
在Vue.js中，如果你想全局隐藏滚动条，并在特定场景如分页组件中恢复滚动条，可以结合JavaScript和CSS来实现。使用`:style`指令可以在运行时动态改变元素的样式。下面是一个示例： 首先，在全局的CSS中隐藏滚动条： ```css /* global.css or app.scss */ body { -ms-overflow-style: none; /* IE 和 Edge */ scrollbar-width: none; /* Firefox */ overflow-y: hidden; /* 隐藏默认滚动条 */ } /* 或者针对Webkit浏览器 */ body::-webkit-scrollbar { display: none !important; } ``` 然后，在分页组件中，我们可以创建一个`showScrollbar`方法来切换滚动条的显示： ```vue <template> <div :style="{ scrollbarVisible: showScrollbar }" ref="scrollContainer"> <!-- 分页内容 --> </div> </template> <script> export default { data() { return { showScrollbar: false, // 初始状态为隐藏滚动条 }; }, methods: { toggleScrollbar() { this.showScrollbar = !this.showScrollbar; } }, // 其他方法... }; </script> <!-- 可能的按钮触发事件 --> <button @click="toggleScrollbar">显示滚动条</button> ``` 现在点击按钮时，滚动条会显示出来。为了在离开分页时再次隐藏滚动条，你可能还需要在`beforeDestroy`或`unmount`生命周期钩子中清除这个样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值