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)
blank

相关推荐

  • 可能是史上最全的权限系统设计

    可能是史上最全的权限系统设计权限系统设计前言权限管理是所有后台系统的都会涉及的一个重要组成部分,主要目的是对不同的人访问资源进行权限的控制,避免因权限控制缺失或操作不当引发的风险问题,如操作错误,隐私数据泄露等问题。目前在

  • C/C++编程学习 – 第5周 ④ 石头剪刀布「建议收藏」

    C/C++编程学习 – 第5周 ④ 石头剪刀布「建议收藏」题目描述石头剪刀布是常见的猜拳游戏。石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样,则不分胜负。一天,小A和小B正好在玩石头剪刀布。已知他们的出拳都是有周期性规律的,比如:“石头-布-石头-剪刀-石头-布-石头-剪刀……”,就是以“石头-布-石头-剪刀”为周期不断循环的。请问,小A和小B比了N轮之后,谁赢的轮数多?输入格式输入包含三行。第一行包含三个整数:N,NA,NB,分别表示比了N轮,小A出拳的周期长度,小B出拳的周期长度。0

  • Windows程序设计——画圆[通俗易懂]

    Windows程序设计——画圆[通俗易懂]代码如下:#include<windows.h>#include<stdlib.h>#include<string.h>long WINAPI WndProc(HWND hWnd,UINT iMessage,UINT wParam,LONG lParam);BOOL InitWindowsClass(HINSTANCE hInstance…

  • 多重共性和VIF检验「建议收藏」

    多重共性和VIF检验「建议收藏」图片来源https://wenku.baidu.com/view/7008df8383d049649b66581a.html 和https://wenku.baidu.com/view/6acdf95e52ea551811a68721.html

  • java代码 软件_适合新手的java代码编写软件有哪些?

    java代码 软件_适合新手的java代码编写软件有哪些?适合新手的java代码编写软件有哪些?发布时间:2020-05-1816:39:11来源:亿速云阅读:196作者:Leah适合新手的java代码编写软件有哪些?相信很多人对java代码编写软件的了解处于一知半解状态,小编给大家总结了以下内容。如下资料是关于java代码编写软件的内容。1、eclipseEclipse是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言,它只是一个框架和…

  • access 注入

    0x00前言现在access的站,比较少,有的话也是小型网站在用,因为access的性能比较差,多人访问都能卡死,所以很多网站都很少会采用access的数据库搭建。但是该学的我们还是得学。0x0

    2021年12月11日

发表回复

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

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