如何在td标记内对齐div标记，使它们排成一行

问题描述 投票：0回答：1

我正在尝试将td内的div标签对齐，以便它们都是内联的。我已经尝试了各种方法，比如使用跨度，并使用bootstrap类进行修改，但我仍然无法弄明白。也许我设置表的方式是错的？

<!DOCTYPE html>
<html>
  <head>
      <title>TODO supply a title</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      <style>
          h4{
              font-size: 2.5vw;
          }
          .container-fluid{
              padding-top: 60px;
          }
      </style>
  </head>
  <body>
    <nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
        <a class="navbar-brand" href="#"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">
                        <span class="fas fa-home"></span>
                        Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><span class="fas fa-dollar-sign"></span></i>Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><span class="badge badge-secondary">5</span>Notifications</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="fas fa-user"></span>Account
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Profile</a>
                        <a class="dropdown-item" href="#">Settings</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Logout</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-10 offset-md-1">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th><h4 class="text-center">Free Plan</h4></th>
                            <th><h4 class="text-center">Standard Plan</h4></th>
                            <th><h4 class="text-center">Premium Plan</h4></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                          <td><h3 class="text-center">$0</h3></td>
                          <td><h3 class="text-center">$19.99</h3></td>
                          <td><h3 class="text-center">$29.99</h3></td>
                        </tr>
                        <tr>
                          <td class="d-none d-md-block">
                            <div class="row">
                              <div class="col">Lorem ipsum</div>
                              <div class="col">Lorem ipsum</div>
                              <div class="col">Lorem ipsum</div>
                            </div>
                          </td>
                          <td class="d-none d-md-block">
                            <div class="row">
                              <div class="col">Lorem ipsum</div>
                              <div class="col">Lorem ipsum</div>
                              <div class="col">Lorem ipsum</div>
                            </div>
                          </td>
                          <td class="d-none d-md-block">
                            <div class="row">
                              <div class="col">Lorem ipsum</div>
                              <div class="col">Lorem ipsum</div>
                              <div class="col">Lorem ipsum</div>
                            </div>
                          </td>
                        </tr>
                        <tr>
                          <td><a href="#" class="btn btn-success btn-block">Purchase</a></td>
                          <td><a href="#" class="btn btn-info btn-block">Purchase</a></td>
                          <td><a href="#" class="btn btn-danger btn-block">Purchase</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <nav class="navbar fixed-bottom navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Sneh Patel</a>
    </nav>
  </body>
</html>

这是当前结果的图片：https://imgur.com/a/SyVPzUH

jquery html bootstrap-4
1个回答
1
投票

你可以使用display: flex与flex-direction: row和justify-content: space-between联合使用。检查下面的剪辑：

<html>

<head>
	<style>

	</style>
	<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
	<style type="text/css">
		.as-console-wrapper {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			max-height: 150px;
			overflow-y: scroll;
			overflow-x: hidden;
			border-top: 1px solid #000;
			display: none;
		}

		.as-console {
			background: #e9e9e9;
			border: 1px solid #ccc;
			display: table;
			width: 100%;
			border-collapse: collapse;
		}

		.as-console-row {
			display: table-row;
			font-family: monospace;
			font-size: 13px;
		}

		.as-console-row:after {
			display: table-cell;
			padding: 3px 6px;
			color: rgba(0, 0, 0, .35);
			border: 1px solid #ccc;
			content: attr(data-date);
			vertical-align: top;
		}

		.as-console-row+.as-console-row>* {
			border: 1px solid #ccc;
		}

		.as-console-row-code {
			width: 100%;
			white-space: pre-wrap;
			padding: 3px 5px;
			display: table-cell;
			font-family: monospace;
			font-size: 13px;
			vertical-align: middle;
		}

		.as-console-error:before {
			content: 'Error: ';
			color: #f00;
		}

		.as-console-assert:before {
			content: 'Assertion failed: ';
			color: #f00;
		}

		.as-console-info:before {
			content: 'Info: ';
			color: #00f;
		}

		.as-console-warning:before {
			content: 'Warning: ';
			color: #e90
		}

		@-webkit-keyframes flash {
			0% {
				background: rgba(255, 240, 0, .25);
			}

			100% {
				background: none;
			}
		}

		@-moz-keyframes flash {
			0% {
				background: rgba(255, 240, 0, .25);
			}

			100% {
				background: none;
			}
		}

		@-ms-keyframes flash {
			0% {
				background: rgba(255, 240, 0, .25);
			}

			100% {
				background: none;
			}
		}

		@keyframes flash {
			0% {
				background: rgba(255, 240, 0, .25);
			}

			100% {
				background: none;
			}
		}

		.as-console-row-code,
		.as-console-row:after {
			-webkit-animation: flash 1s;
			-moz-animation: flash 1s;
			-ms-animation: flash 1s;
			animation: flash 1s;
		}
	</style>
</head>

<style>
	@media screen and (max-width: 900px) {
		.divInfo {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100%
		}
	}

	@media screen and (min-width: 901px) {
		.div-info {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%
		}
	}
</style>

<body>


	<title>TODO supply a title</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
		integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>
	<style>
		h4 {
			font-size: 2.5vw;
		}

		.container-fluid {
			padding-top: 60px;
		}
	</style>


	<nav class="navbar fixed-top navbar-expand-md navbar-light bg-light">
		<a class="navbar-brand" href="#"></a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
			aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item active">
					<a class="nav-link" href="#">
						<span class="fas fa-home"></span>
						Home <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#"><span class="fas fa-dollar-sign"></span>Pricing</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#"><span class="badge badge-secondary">5</span>Notifications</a>
				</li>
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
						aria-haspopup="true" aria-expanded="false">
						<span class="fas fa-user"></span>Account
					</a>
					<div class="dropdown-menu" aria-labelledby="navbarDropdown">
						<a class="dropdown-item" href="#">Profile</a>
						<a class="dropdown-item" href="#">Settings</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Logout</a>
					</div>
				</li>
			</ul>
		</div>
	</nav>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-10 offset-md-1">
				<table class="table table-striped table-bordered">
					<thead>
						<tr>
							<th>
								<h4 class="text-center">Free Plan</h4>
							</th>
							<th>
								<h4 class="text-center">Standard Plan</h4>
							</th>
							<th>
								<h4 class="text-center">Premium Plan</h4>
							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								<h3 class="text-center">$0</h3>
							</td>
							<td>
								<h3 class="text-center">$19.99</h3>
							</td>
							<td>
								<h3 class="text-center">$29.99</h3>
							</td>
						</tr>
						<tr>
							<td>
								<div style="display:flex; flex-direction:row;justify-content:space-between;">
									<div class="div-info">
										<div class="col">Lorem ipsum</div>
										<div class="col">Lorem ipsum</div>
										<div class="col">Lorem ipsum</div>
									</div>
								</div>
							</td>
							<td>
								<div style="display:flex; flex-direction:row;justify-content:space-between; width:100%">
									<div class="div-info">
										<div class="col">Lorem ipsum</div>
										<div class="col">Lorem ipsum</div>
										<div class="col">Lorem ipsum</div>
									</div>
								</div>
							</td>
							<td>
								<div style="display:flex; flex-direction:row;justify-content:space-between; width:100%">
									<div class="div-info">
										<div class="col">Lorem ipsum</div>
										<div class="col">Lorem ipsum</div>
										<div class="col">Lorem ipsum</div>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td><a href="#" class="btn btn-success btn-block">Purchase</a></td>
							<td><a href="#" class="btn btn-info btn-block">Purchase</a></td>
							<td><a href="#" class="btn btn-danger btn-block">Purchase</a></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<nav class="navbar fixed-bottom navbar-dark bg-dark">
		<a class="navbar-brand" href="#">Sneh Patel</a>
	</nav>


	<script type="text/javascript">

	</script>

	<div class="as-console-wrapper">
		<div class="as-console"></div>
	</div>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.