这个行间距怎么调

老代还年轻 2019-11-08 11:21:48
我如何用css调这个邮箱/用户名与文本框的行间距，因为我在前边对nei设置了行间剧，如果要优先调整文本与文本框的距离要用子代选择器吗。具体怎么弄
...全文
170 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
老代还年轻 2019-11-10
  • 打赏
  • 举报
 回复
引用 10 楼 horizon_zpy的回复:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>京东</title> <style type="text/css"> .box { width: 1000px; height:370px; border: 10px solid gainsboro; background-color: #fff; margin: 80px auto; position: relative; } .nei { display: inline-block; width: 220px; line-height: 30px; } .im { position: absolute; top: 50px; right: 50px; } .nei #btn { width: 250px; height: 30px; background-color: #ff0000; color: #fff; font-size: 14px;} .nei #df { width: 100px; height: 30px; background-color:#66cc00 ; color:white; font-size: 14px; } .we{ font-family: simHei; font-size: xx-large; color: #999999; margin-left: 200px; } .gao{ display: block; line-height: 0.01px; } </style> </head> <body> <p class="we">欢迎登录</p> <div class="box"> <img src="img/123.png"/> <div class="im"> <span class="nei"> <span class="gao" >邮箱/用户名/已验证手机</span><br /> <span class="gao" style="margin-top: -2px;" ><input style="width: 200px;"/span> </span> <span class="nei"> <input id="btn" type="submit" value="登 录"/> </span> <span class="nei"> <input id="df" type="submit" value="免费注册>>"/> </span> </div> </div> </body></html>

是不是下面这句，inline-block是转换为块级元素的。
.nei { display: inline-block; width: 220px; line-height: 30px; }
谢谢！谢谢，已经解决
horizon_zpy 2019-11-10
  • 打赏
  • 举报
 回复
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>京东</title> <style type="text/css"> .box { width: 1000px; height:370px; border: 10px solid gainsboro; background-color: #fff; margin: 80px auto; position: relative; } .nei { display: inline-block; width: 220px; line-height: 30px; } .im { position: absolute; top: 50px; right: 50px; } .nei #btn { width: 250px; height: 30px; background-color: #ff0000; color: #fff; font-size: 14px;} .nei #df { width: 100px; height: 30px; background-color:#66cc00 ; color:white; font-size: 14px; } .we{ font-family: simHei; font-size: xx-large; color: #999999; margin-left: 200px; } .gao{ display: block; line-height: 0.01px; } </style> </head> <body> <p class="we">欢迎登录</p> <div class="box"> <img src="img/123.png"/> <div class="im"> <span class="nei"> <span class="gao" >邮箱/用户名/已验证手机</span><br /> <span class="gao" style="margin-top: -2px;" ><input style="width: 200px;"/span> </span> <span class="nei"> <input id="btn" type="submit" value="登 录"/> </span> <span class="nei"> <input id="df" type="submit" value="免费注册>>"/> </span> </div> </div> </body></html>

是不是下面这句，inline-block是转换为块级元素的。
.nei { display: inline-block; width: 220px; line-height: 30px; }
老代还年轻 2019-11-09
  • 打赏
  • 举报
 回复
引用 3 楼 天际的海浪的回复:
行间距line-height应该在块元素上设置（如div,p,li.td）
我大概知道错误点在哪儿了，结构不规范，div布局还是不行。感谢大佬，谢谢谢谢
老代还年轻 2019-11-09
  • 打赏
  • 举报
 回复
引用 7 楼 天际的海浪的回复:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>京东</title>
		<style type="text/css">
			.box {
				width: 1000px;
				height:370px;
				border: 10px solid gainsboro;
				background-color: #fff;
				margin: 80px auto;
				position: relative;
			}
			.nei1 {
				width: 220px;
				line-height: 30px;
			}
			.nei2 {
				width: 220px;
				line-height: 100px;
			}
			.im {
				position: absolute;
				top: 50px;
				right: 50px;
			}
			#btn {
				width: 250px;
				height: 30px;
				background-color: #ff0000;
				color: #fff;
				font-size: 14px;
			}
			#df {
				width: 100px;
				height: 30px;
				background-color:#66cc00;
				color:white;
				font-size: 14px;
			}
			.we {
				font-family: simHei;
				font-size: xx-large;
				color: #999999;
				margin-left: 200px;
			}
		</style>
	</head>
	<body>
		<p class="we">欢迎登录</p>
		<div class="box">
			<img src="img/123.png" />
			<div class="im">
				<div class="nei1">
					邮箱/用户名/已验证手机<br />
					<input  style="width: 200px;" />
				</div>
				<div class="nei2">
					<input id="btn" type="submit" value="登     录"/><br />
					<input id="df" type="submit" value="免费注册>>"/>
				</div>
			</div>
		</div>
	</body>

</html>
非常感谢。非常感谢。那个可以告诉一下我的错误点犯在哪儿了吗
天际的海浪 2019-11-09
  • 打赏
  • 举报
 回复 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>京东</title>
		<style type="text/css">
			.box {
				width: 1000px;
				height:370px;
				border: 10px solid gainsboro;
				background-color: #fff;
				margin: 80px auto;
				position: relative;
			}
			.nei1 {
				width: 220px;
				line-height: 30px;
			}
			.nei2 {
				width: 220px;
				line-height: 100px;
			}
			.im {
				position: absolute;
				top: 50px;
				right: 50px;
			}
			#btn {
				width: 250px;
				height: 30px;
				background-color: #ff0000;
				color: #fff;
				font-size: 14px;
			}
			#df {
				width: 100px;
				height: 30px;
				background-color:#66cc00;
				color:white;
				font-size: 14px;
			}
			.we {
				font-family: simHei;
				font-size: xx-large;
				color: #999999;
				margin-left: 200px;
			}
		</style>
	</head>
	<body>
		<p class="we">欢迎登录</p>
		<div class="box">
			<img src="img/123.png" />
			<div class="im">
				<div class="nei1">
					邮箱/用户名/已验证手机<br />
					<input  style="width: 200px;" />
				</div>
				<div class="nei2">
					<input id="btn" type="submit" value="登     录"/><br />
					<input id="df" type="submit" value="免费注册>>"/>
				</div>
			</div>
		</div>
	</body>

</html>
老代还年轻 2019-11-09
  • 打赏
  • 举报
 回复
引用 5 楼 天际的海浪的回复:
你用margin-top 和 margin-bottom 调整下试试（可以设置负数）
你帮我看看呗，代码如下，我调了一早上了各种方法，百度都试了，给老师发信息她也不回，都快崩溃了<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>京东</title> <style type="text/css"> .box { width: 1000px; height:370px; border: 10px solid gainsboro; background-color: #fff; margin: 80px auto; position: relative; } .nei { display: inline-block; width: 220px; line-height: 100px; } .im { position: absolute; top: 50px; right: 50px; } .nei #btn { width: 250px; height: 30px; background-color: #ff0000; color: #fff; font-size: 14px;} .nei #df { width: 100px; height: 30px; background-color:#66cc00 ; color:white; font-size: 14px; } .we{ font-family: simHei; font-size: xx-large; color: #999999; margin-left: 200px; } .gao{ display: block; line-height: 0.01px; } </style> </head> <body> <p class="we">欢迎登录</p> <div class="box"> <img src="img/123.png"/> <div class="im"> <span class="nei"> <span class="gao" >邮箱/用户名/已验证手机</span><br /> <span class="gao" style="margin-top: -2px;" ><input style="width: 200px;"/span> </span> <span class="nei"> <input id="btn" type="submit" value="登 录"/> </span> <span class="nei"> <input id="df" type="submit" value="免费注册>>"/> </span> </div> </div> </body></html>
老代还年轻 2019-11-09
  • 打赏
  • 举报
 回复
还没人吗！！！！！……
天际的海浪 2019-11-09
  • 打赏
  • 举报
 回复
你用margin-top 和 margin-bottom 调整下试试（可以设置负数）
老代还年轻 2019-11-09
  • 打赏
  • 举报
 回复
引用 3 楼 天际的海浪的回复:
行间距line-height应该在块元素上设置（如div,p,li.td）
就是我已经设置了一次，然后想再调整一下这两的距离，登录，注册，与这两间距不变
天际的海浪 2019-11-09
  • 打赏
  • 举报
 回复
行间距line-height应该在块元素上设置（如div,p,li.td）
老代还年轻 2019-11-08
  • 打赏
  • 举报
 回复
救救我吧……………………
C# RichTextbox设置行间距
C# RichTextbox设置行间距
lable的行间距和字间距的设置
根据要显示字体的多少，行间距，字间距的调整，计算出lable总的高度的方法，此demo简单易懂
爱上axure之原型绘制规范视频教程
1，此阶段课程为《爱上axure》系列第二阶段绘制原型课程 。2，这套教程主要给小伙伴们分享了，网站设计规范与移动端设计规范，并作了案例演示。3，内容适合刚入门设计和学习的小伙伴使用，给大家分享的都是小哥在工作过程中的总结与经验。4，内容简单易懂，涉及了大量的尺寸、间距以类的数值，对大家在入门UI、或是原型绘制都有很大的帮助。
QtextEdit 段 行间距设置源码
通过html的css实现段间距设置，行间距是用QTextBlockFormat QTextBlock等配合设置。
tinyMCE 富文本编辑器 line-height 行间距调整.zip
tinyMCE 富文本编辑器 line-height 行高插件。 tinyMCE富文本编辑器line-height行高插件，下载后放在tinyMCE插件的plugins文件夹中，之后初始化中引入plugins，即可在toolbar中展示 tinyMCE line-height 行高插件
CSS

61,114

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章