Question

我希望这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>

Answer 1

尝试一下；表非常适合组织<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">
		<table>
          <tbody>
		  <tr><div class="d1"></div></tr>
		  <tr><div class="d1"></div></tr>
	      <tr><div class="d1"></div></tr>
		  <tr><div class="d1"></div></tr>
		  <tr><div class="d1"></div></tr>
          </tbody>
		</table>
		
	</div>
</body>
</html>

Answer 2

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>

如何在此HTML页面中将行内联？

2 个答案: