同一行上的图标很棒

时间：2018-07-10 05:49:52

标签： html css

我一直试图将这些元素放在同一行中，并且都集中在左侧，而且我不得已而不得不寻求帮助

演示：

Jsfiddle 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.1.0/css/all.css' integrity='sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt' rel='stylesheet'/>
</head>
<body>

<a href="#"><span class="fa-stack fa-2x"><span class="fa fa-circle fa-stack-2x"></span><span class="fa fa-link fa-stack-1x fa-inverse"></span></span></a>
<a href="#"><h4>Jennifer Lopez Ft. Ozuna – El Anillo (Remix)</h4></a>
<span class="fa fa-tag"></span> Label1, Label2, Label3 
<span class="label label-default">Musica</span>



  <div class="row">
    <div class="col-1"></div>
    <div class="col"></div>
  </div>

</body>
</html>

enter image description here

3 个答案:

答案 0 :(得分：1)

您需要放置一些HTML和CSS。

.icon-img,.title,.label,.label-wrap{
	position:relative;
	display:table-cell;
	vertical-align:middle;
}
.cover{
	display:table;
	position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.1.0/css/all.css' integrity='sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt' rel='stylesheet'/>
<meta content='¡KLK! RD' name='generator'/>
</head>
<body>

		<div class="cover">
			<a href="#" class="icon-img">
				<span class="fa-stack fa-2x">
					<span class="fa fa-circle fa-stack-2x"></span>
					<span class="fa fa-link fa-stack-1x fa-inverse"></span>
				</span>
			</a>
			<div class="title">
				<a href="#"><h4>Jennifer Lopez Ft. Ozuna – El Anillo (Remix)</h4></a>
				<span class="fa fa-tag"></span> Label1, Label2, Label3 
				<span class="label label-default">Musica</span>
			</div>
		</div>

		<div class="cover">
			<a href="#" class="icon-img">
				<span class="fa-stack fa-2x">
					<span class="fa fa-circle fa-stack-2x"></span>
					<span class="fa fa-link fa-stack-1x fa-inverse"></span>
				</span>
			</a>
			<div class="title">
				<a href="#"><h4>Shelow Shaq - Musica Manteca</h4></a>
			</div>
			<div class="label-wrap">
				<span class="label label-default">Musica</span>
			</div>
		</div>





	<div class="row">
		<div class="col-1"></div>
		<div class="col"></div>
	</div>
</body>
</html>

答案 1 :(得分：0)

使用display:flex至wrap格。并将每个部分包装在div中。

使用margin-bottom: 0;到description（h4）

请参见小提琴：http://jsfiddle.net/yh0ucvwt/16/ 

.wrap{
  display:flex;
}
.description{
margin-bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.1.0/css/all.css' integrity='sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt' rel='stylesheet'/>
<meta content='¡KLK! RD' name='generator'/>
</head>
<body>
<div class="wrap">
<div>
<a href="#">
   <span class="fa-stack fa-2x"><span class="fa fa-circle fa-stack-2x"></span>
   <span class="fa fa-link fa-stack-1x fa-inverse"></span></span>
</a>
</div>
<div>
<a href="#"><h4  class="description">Jennifer Lopez Ft. Ozuna – El Anillo (Remix)</h4></a>

<div>
<span class="fa fa-tag"></span> Label1, Label2, Label3 
<span class="label label-default">Musica</span>
</div>
</div>
</div>

  <div class="row">
    <div class="col-1"></div>
    <div class="col"></div>
  </div>

</body>
</html>

答案 2 :(得分：0)

尝试使用引导程序的网格系统

http://jsfiddle.net/bf5j2nxd/ 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.1.0/css/all.css' integrity='sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt' rel='stylesheet'/>
<meta content='¡KLK! RD' name='generator'/>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-1">
        <a href="#"><span class="fa-stack fa-2x"><span class="fa fa-circle fa-stack-2x"></span><span class="fa fa-link fa-stack-1x fa-inverse"></span></span></a>
    </div>
    <div class="col-xs-11">
      <a href="#"><h4>Jennifer Lopez Ft. Ozuna – El Anillo (Remix)</h4></a>
      <span class="fa fa-tag"></span> Label1, Label2, Label3 
      <span class="label label-default">Musica</span>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-1">
        <a href="#"><span class="fa-stack fa-2x"><span class="fa fa-circle fa-stack-2x"></span><span class="fa fa-link fa-stack-1x fa-inverse"></span></span></a>
    </div>
    <div class="col-xs-11">
      <a href="#"><h4>Shelow Shaq - Musica Manteca</h4></a>
      <span class="label label-default">Musica</span>
    </div>
  </div>
</div>

</body>
</html>

相关问题
最新问题