html两个div占满一行，设置div背景色，用float浮动并让键值对形式的文字键右对齐，值左对齐

全栈程序员站长

发布于 2022-06-30 13:36:35

2K0

发布于 2022-06-30 13:36:35

文章被收录于专栏：全栈程序员必看

想实现下图所示的效果：

html两个div占满一行，设置div背景色，用float浮动并让键值对形式的文字键右对齐，值左对齐

代码：

<!DOCTYPE html>
<html>
<body>

<div >
   <div style="float:left;width:50% ;background-color:red">
       <span style="float:right; padding-right:5%">key1:
       </span>
   </div>
   <div style="float:right ;width:50%;background-color:blue">
       <span style="float:left;padding-left:5%"> 
          value1
       </span>
   </div>
</div>
<div style="padding-left:10%">22<div>
<div >
   <div style="float:left;width:50% ;background-color:red">
       <span style="float:right; padding-right:5%">key111111:
       </span>
   </div>
   <div style="float:right ;width:50%;background-color:blue">
       <span style="float:left;padding-left:5%"> 
          value1111111
       </span>
   </div>
</div>
<div >
   <div style="float:left;width:50% ;background-color:red">
       <span style="float:right; padding-right:5%">key22222:
       </span>
   </div>
   <div style="float:right ;width:50%;background-color:blue">
       <span style="float:left;padding-left:5%"> 
          value22222
       </span>
   </div>
</div>

</body>
</html>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/106252.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021年7月2，如有侵权请联系 cloudcommunity@tencent.com 删除

java