小技巧：去掉每一行最后一个li的外边框/是否准许用户调整文本域的大小

最新推荐文章于 2023-04-05 13:32:35 发布
原创 最新推荐文章于 2023-04-05 13:32:35 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了几种实用的CSS技巧，包括如何去除列表项最后一个元素的边框，如何控制文本区域的调整大小，以及如何实现单行或多行文本的水平居中和左对齐。

去掉每一行最后一个li的外边框

1.给每个li起类名单独去掉；（不建议使用）

2.将ul稍微多设置一点宽度，在ul的父容器中设置正常宽度、高度，并写overflow：hidden；

3.ul无父元素时可给li写margin-left：-value；在ul中写overflow：hidden。

是否准许用户调整文本域的大小

<textarea>

设置resize属性：none（不准许）/both（准许水平垂直调整大小）/vertical（垂直）/horizontal（水平）

实现：单行文本时，实现单行文本在父元素里水平居中，若多行，实现文本左对齐

父元素：text-align：center；

自级元素：text-align：left；display：inline-block。

day02：input、下拉框、文本域、frameset（target、name）、div、css、行内内部外部导入、选择器、字体的样式、文本的样式、背景的样式、边框样式、轮廓样式、列表的样式
m0_45209551的博客
03-16 1986
一 回顾 1.html是超本文标记语言 2.web前端的三剑客:html css js 3.html常用的标签 标题标签 <h1></h1> <h6></h6> 图像:<img src="路径" width="宽度" height="高度" alt="图片加载错误的提示信息" title="鼠标移入的提示信息"> 超链接:<a href="跳转的地址" target="页面打开的方式"></a&g...
如何去掉li标签的重叠边框
weixin_30562507的博客
06-16 257
当我们的li标签设置了border的时候就会出现重叠边框，如何去掉呢，见代码 html代码 <ul class="friendLink_list"> <li><a href="javascript:;">营销费用管理</a></li> <li...
CSS基础
单飞吧的博客
09-09 380
Js的全局作用域就是window Function 内存中保存一段代码的函数 代码重用 调用函数 函数名(实参值) 第一种 以声明的方式创建函数 function 函数名(形参列表){ 函数体 return 返回值 } 有一个问题：会被声明提前 第二种 以赋值的方式创建函数  var arr= function (形参列表){ 函数体 return 返回值 } 第三种 用new创建函数 几乎不用 var fun=new Function函
分清ul和li的边界
enzyco的博客
01-17 675
接触代码时间刚1周，最近学到内外边距，在把外边距取值为0的时候，常常遇到设定padding为0了，但是两个表格中间任然留白的情况。 可发现标签“a、p、h4”的外边距都为0，但是标签“li”有些格格不入，任有留白的地方。通过F12查看。发现： 留白的地方为“ul”，因此在设置padding的时候，标签需要选择“ul”，修改如下： 边距问题是解决了，但是表格的问题有暴露出来，两个“li”中间的表格线没有了。当然这个问题比较简单，对要修改的标签重新编辑即可。 此时，我们发现第三、四排之间存在重复的横线，查
去除列表最后一个li元素的border-bottom
qq_38105960的博客
07-13 6355
方法一：给最后一个li单独设置一个类样式，重新设置border-bottom的属性值为none，或者使用margin-bottom设置负边距。 .lastli{ margin-bottom:-1px ; /*或者使用border-bottom: none;*/ } 方法二：使用CSS3中的新增加选择器，选择最后一个li，不使用类样式，好处是当li的个数不...
html如何让ul的边框消失,设置了ul的下边框，没设置li的下边框，为什么两者之间会有空隙？如何消除该空隙？...
weixin_39608559的博客
06-04 993
现有三个文件，分别为index.html，index.js，style.css，主体代码如下：index.html...index.jsnew Vue({el: "#app",data() {currentLi: 1},template:`123`});style.css.c1 {border-bottom: 1px black solid;list-style: none;padding-lef...
CSS3 :not()选择器实现最后一行li去除某种css样式
09-24
上述CSS规则表示，`.listItem`类下的所有`li`元素中，除了`:last-child`（即最后一个子元素）之外，都将应用绿色的1像素实线边框。这样，最后一个`li`就不会有下边框，而其他`li`则会有。 此外，`:not()`选择器还...
UL里的LI元素左浮动层一行显示时使其居中的方法
09-25
在网页设计中，列表（LI元素）的布局是一个常见的需求，尤其是当需要将列表中的项目水平显示在一行内，并且要求这些项目居中显示时。通常情况下，列表项会使用CSS的浮动属性（float）来实现横向布局，比如左浮动。...
精选资源
flex弹性盒布局最后一行左对齐的实现思路
01-19
但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after，如图 <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> ul{ ...
去掉li标签的重叠边框
qq_34815528的博客
09-07 1734
li加上：margin: 0 0 -1px -1px;
去除列表li元素的下边框
weixin_33872566的博客
06-01 741
注意不要为 ul 设置高度，可以在外层父元素设置想要的高度。 CSS： ul { overflow:hidden; width:240px; border:1px solid #65B453; border-radius:4px; background:#E9FBE4; list-style:none;}ul li { padding:15px 1...
HTML—CSS-case（合并boder / 滑动门 / 去除li边框 /css三角形原理）
404-NotFound的博客
08-08 727
1.实现多个div盒子横排列，鼠标点上去后显示border，相连的border合并。 ：利用position：relative的层级比标准流高（后来居上原则），与margin-left：-1px； 若都有position：relative 利用z-index提高层级 效果： 代码： <style> div { width: 250px;...
HTML上的ul li标签消除,去掉ul li 前面的点与空白（div+css）
weixin_28685287的博客
06-03 2万+
如果直接在网页用 ul li 标签，默认情况下有一个小黑点，并且每个li前面还有一段空白，尤其是li中包括图片的情况。为什么会出现这种情况？ul li 是 html 中的列表标签，所以默认每个li前面都有一个小黑点。而每个li前面空白与 padding 和 margin 有关，padding 是内间距，margin 外边距。仅用文字说明不太形象，下面将分别举例说明去掉 ul li前面的点的方法和列...
CSS实现最后一个li样式不一样
若水印象博客
05-09 9239
#news .newsmore{ display:block; margin-top: 0; cursor: pointer; border-bottom:1px solid #E0E0E0; } #news .newsmore:last-child { border-bottom: 0; }
CSS实现无外边框列表效果
weixin_44099111的博客
04-19 839
方法一：使用外层容器切割 给每一个 li 设定右边框和下边框线 把ul放置在一个外层div中，设定div的宽高，通过overflow:hidden将一部分li的边框隐藏 此方法只需要计算父容器的宽高，能应付任何行与列数，推荐使用。 CSS部分： body{background: #f3f3f3;} ul, li{list-style: none; padding: 0; margin: 0;}...
怎么去掉li、ul等前面的点及如何去掉空格的方法
热门推荐
haylee的专栏
07-26 3万+
大部分DIV+CSS网站制作布局时经常会遇到LI点的情况，特别是对新手来说可能有点陌生，如何去掉中的点呢，或者如何改变点成数字1234或者改成空心圆方块等呢，又如何改变点的颜色？其实很简单：直接定义LI的CSS为list-style-type :none即可去掉点，如 li{    list-style-type :none; } 如果要改变点的颜色，那么li里的字也会变颜色与大小的了
前端那些你不知道的小技巧（CSS篇）
廖龙东个人博客
04-05 208
SVG对所有的分辨率类型都具有良好的扩展性，并支持所有浏览器都回归到IE9。可以选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式。持续更新中，欢迎大家留言，收集更多的实用小技巧，共同学习，共同进步。产生的原因：因为连续多个空白符（空格，换行符，回车符等）引起的。用来创建一个伪元素，其将成为匹配选中的元素的第一个子元素。CSS复位可以在不同的浏览器上保持一致的样式风格。用来创建一个伪元素，作为已选中元素的最后一个子元素。生成的伪元素，只能用于包含在元素格式框内，如。
可是多个并列li中的span大小不一，会导致每一行的input左边无法对齐怎么解决
最新发布
09-07
如果你遇到多个并列的`<li>`元素，其中的`<span>`大小不一致，导致对应的`<input>`元素左侧无法对齐，可以尝试以下几种方法来解决这个问题： 1. **固定宽度**： 给每个`<input>`设置固定的宽度，使其不受`<span>`大小的影响，同时使用百分比或固定像素值，以适应不同长度的`<span>`。例如： ```css input { width: calc(100% - max-content); /* 减去最长span的宽度 */ /* 或者 */ width: 25%; /* 避免直接依赖span，设置每列输入框占总宽度的25%，留出间隙 */ } ``` 2. **动态调整输入框边缘**： 如果你想让输入框紧贴`<span>`右边，可以计算`<span>`的实际宽度，并以此为基础调整`<input>`的左边缘。这通常需要一些JavaScript配合，如jQuery: ```javascript $('.li-element').each(function() { var spanWidth = $(this).find('span').outerWidth(); $(this).find('input').css('left', 'calc(100% - ' + spanWidth + 'px)'); }); ``` 3. **使用Flexbox布局**： 利用Flexbox的特性，你可以使`<input>`自适应`<span>`，而不会受到其大小的影响： ```css li { display: flex; align-items: center; } input { flex: 1; /* 自动分配剩余空间 */ } ``` 4. **表格布局**： 如果所有`<li>`元素需要按行对齐，可以考虑转换成表格布局，使每个单元格宽度相等： ```html <div class="table"> <div class="cell"> <span>...</span> <input type="..."> </div> <!-- 更多li... --> </div> <style> .table { display: table; } .cell { display: table-cell; } ``` 根据实际情况和兼容性需求选择最适合的方法。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值