html使用display:inline-block实现标签右对齐,值左对齐效果。和设置div宽度,并居中显示。嵌套div的里层div文字居中显示

html使用display:inline-block实现标签右对齐,值左对齐效果。和设置div宽度,并居中显示。嵌套div的里层div文字居中显示

要实现下图所示的效果:

html使用display:inline-block实现标签右对齐,值左对齐效果。和设置div宽度,并居中显示。嵌套div的里层div文字居中显示

代码:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<div style="display:inline-block; float:left;width:50% ;background-color:blue">
<label style="width:50%; float:left;text-align:right;background-color:red;">key1rrr</label>
<span style="">value1</span>
</div>
<div style="float:left;width:100%;margin-top:5px"><span >22</span></div>
<div style="display:inline-block; float:left;width:50% ;background-color:blue">
<label style="width:50%; float:left;text-align:right;background-color:red;">key1rrrrrr</label>
<span style="">value1gggg</span>
</div>

<div style="display:inline-block; float:left;width:50% ;background-color:blue">
<label style="width:50%; float:left;text-align:right;background-color:red;">key1rrrfff</label>
<span style="">valufffe1</span>
</div>
<div style="display:inline-block; float:left;width:50% ;background-color:blue">
<label style="width:50%; float:left;text-align:right;background-color:red;">key1rrr</label>
<span style="">value1</span>
</div>
</body>
</html>

可直接把代码拿到w3c网站测试

2,设置div宽度,并居中显示

<html>
<head>
<style type="text/css">

</style>
</head>

<body>
<div style="display:inline-black;float:left;width:100%;text-align:center">
     <div style="width:600px;"><span style="background-color:red;"> div 元素的内容不会显示出来!</span></div>
</div>
</body>
</html>

显示结果:

html使用display:inline-block实现标签右对齐,值左对齐效果。和设置div宽度,并居中显示。嵌套div的里层div文字居中显示

总结:使用标签前要了解此标签的属性有哪些,比如span标签没有width属性,所以即使设置了宽度也不会起作用,这是小编经常犯的错误。

3,嵌套div的里层div文字居中显示

<div align="center" style="display:inline-black; float:left; margin-top:50px;width:100%;text-align:center">
		<span style="width:100%;float:left;">
			<font size="4"  color="#337ab7"><strong>报告解说</strong></font></span>
		</span>
		<br/>
		<br/>
		<div style="width:850px;margin:0 auto;text-align:left" >
			<font size="2"  color="#337ab7"><strong>对于报告中出现的部分英文码解释如下:<br/>
			(1) 规则类型码 : “CRS”表示“跨机构申请类规则”; “GRP”表示“团伙欺诈类规则”; “HIS”表示“历史申请类规则”; “BLK”表示“黑名单类规则”; “LGC”表示“当前申请自身逻辑判断类规则。
			<br/>(2) 规则威胁等级: “H”表示“high,建议拒绝该申请”; “M”表示“medium,建议人工审核”; “L”表示“low,建议通过该申请”。
			</strong></font>
		
		</div>
	</div>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106248.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 软著源代码要求多少页_怎么查看源代码的编码格式

    软著源代码要求多少页_怎么查看源代码的编码格式申请软件著作权登记的时候会被要求提交60页的源代码。没有经验的开发者朋友第一次申请的时候难免会遇到因代码文档格式不正确、代码里含有其他版权信息等原因被要求补正的问题,从而导致拿证时间延误。为了帮助开发者朋友一次性顺利通过软件著作权登记的审查,下面为大家分享下自己总结的60页源代码整理攻略。第一步:请点击下载软件著作权登记源代码模板;第二步:将打算申请软著的软件名称及版本号替换模板里左上角“自助登记安卓版应用软件V1.0”;第三步:打开软件的代码文件,复制代码;第四步:回到本文档,“Ctal+A”.

  • 聊一聊二维码扫描登录原理

    聊一聊二维码扫描登录原理

  • unix命令之xargs[通俗易懂]

    unix命令之xargs[通俗易懂]unix命令之xargs,与"|"配合的神奇命令

  • Mac — MySql配置环境变量

    Mac — MySql配置环境变量全网最详细的Mac–MySql环境配置变量,包教会????,不信你就来看

  • 电脑蓝屏0x000000f4解决步骤_0x000000c4开机就蓝屏

    电脑蓝屏0x000000f4解决步骤_0x000000c4开机就蓝屏电脑蓝屏的问题是大家最常见到的电脑问题之一,大多时候蓝屏故障的出现都和软件有关,少数为硬件不兼容或者故障导致。这里粗略的分析下STOP:0x000000F4字段的问题,仅做参考!以下先来看看网友是怎么分析与解决问题的吧!蓝屏代码0x000000f4原因分析:知道了原因,那么就下手解决类似问题就轻松了。1.先从软处着手,如运行莫软件导致错误,建议重装该软件,一般均可解决。2.考虑是否有其它软件同时运行导致冲突的或者主机配置内存过小导致内存溢出或者耗竭的(如采用XP系统建议配置512MB内存以上或.

  • 6种php加密解密方法

    6种php加密解密方法<?phpfunctionencryptDecrypt($key,$string,$decrypt){if($decrypt){$decrypted=rtrim(mcrypt_d

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号