时间戳

首页 > 解决方案 > 如何在此 Html 页面中将行内联？

html - 如何在此 Html 页面中将行内联？

问题描述

我希望这 5 次潜水的线在垂直和水平方向上相互对齐。我该怎么做呢？我尝试通过向 div 添加边距来做到这一点，但我无法获得好的结果。我想要这样的图像。我想在不使用表格标签的情况下做到这一点。

像这样的图像

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
	<style>
		.d{
			width:980px;height:500px;margin:0 auto;
		}
		.d ul{
			list-style-type: none;padding:0;margin:0;
		}
		.d ul li{
			list-style-type: none;padding:0;
		}
		.d1{
			width:50%;height:100px;direction: rtl;border:solid 2px #1946E7;padding:0;box-sizing:border-box;	
		}
		.r{
			direction:rtl;
		}	
		.l{
			direction:ltr;
		}
	</style>
</head>

<body>
	<div class="d">
		<ul>
		  <li class="l"><div class="d1"></div></li>
		  <li class="r"><div class="d1"></div></li>
	      <li class="l"><div class="d1"></div></li>
		  <li class="r"><div class="d1"></div></li>
		  <li class="l"><div class="d1"></div></li>
		</ul>
		
	</div>
</body>
</html>

标签： htmlcss

解决方案

Try This Code!!Hope This Work For you..


.d{
			width:980px;height:500px;margin:0 auto;
		}
		.d ul{
			list-style-type: none;padding:0;margin:0;
		}
		.d ul li{
    list-style-type: none;
    padding: 0;
    margin: -8px;
    width: 85%;
    max-width: 100%;
		}
		.d1{
    width: 50%;
    height: 100px;
    direction: rtl;
    border: solid 10px #222223;
    box-sizing: border-box;
    padding: 50px 201px;
		}
		.r{
			direction:rtl;
		}	
		.l{
			direction:ltr;
		}
<div class="d">
		<ul>
		  <li class="l"><div class="d1"></div></li>
		  <li class="r"><div class="d1"></div></li>
	      <li class="l"><div class="d1"></div></li>
		  <li class="r"><div class="d1"></div></li>
		  <li class="l"><div class="d1"></div></li>
		</ul>
		
	</div>

推荐阅读