使用带有表和表格单元格值的display属性对内容进行对齐

时间：2017-01-10 10:08:48

标签： html css

我正在尝试显示2个具有相同顶线标记的表格单元格。

实际对齐：

预期：

请查看我的fiddle

代码

＆＃13;
＆＃13; 
.related-list-main { width: 300px;display: table;padding: 10px; }
.related-list-title { font: 12px Verdana,Arial,san-serif;display: table-cell; width: 85%;text-align: left;  /* color: #337ab7; */ }
.related-list-sno  { font: 22px Verdana,Arial,san-serif;color:#A51F1D; display: display: table-cell; width: 15%;text-align: right;float: right; }
.related-list-border-bot { border-bottom: 1.5px solid #eceaea;margin: 0 0px; height: 1.5px;text-align: center; }
＆＃13; 
<div id="patents" class="tab-pane in active ">
	<div class="related-list-main">
		<div style="display:table-row;width:100%">
			<div class="related-list-title">
				<a href="#">Sea Food Flavored Food Products</a>
			</div>
			<div class="related-list-sno">
				1
			</div>
		</div>
	</div>
	<div class="related-list-border-bot">
		&nbsp;
	</div>
	<div class="related-list-main">
		<div style="display:table-row;width:100%">
			<div class="related-list-title">
				<a href="#">Food Ingredients and Food Products Treated with an Oxidoreductase and Methods for Preparing Such Food Ingredients and Food Products</a>
			</div>
			<div class="related-list-sno">
				2
			</div>
		</div>
	</div>
	<div class="related-list-border-bot">
		&nbsp;
	</div>
	<div class="related-list-main">
		<div style="display:table-row;width:100%">
			<div class="related-list-title">
				<a href="#">Food and Process for Producing Food</a>
			</div>
			<div class="related-list-sno">
				3
			</div>
		</div>
	</div>
	<div class="related-list-border-bot">
		&nbsp;
	</div>
	<div class="related-list-main">
		<div style="display:table-row;width:100%">
			<div class="related-list-title">
				<a href="#">Prepared Food for Functional Food</a>
			</div>
			<div class="related-list-sno">
				4
			</div>
		</div>
	</div>
	<div class="related-list-border-bot">
		&nbsp;
	</div>
	<div class="related-list-main">
		<div style="display:table-row;width:100%">
			<div class="related-list-title">
				<a href="#">Food Ingredients and Food Products Treated with an Oxidoreductase and Methods for Preparing Such Food Ingredients and Food Products</a>
			</div>
			<div class="related-list-sno">
				5
			</div>
		</div>
	</div>
	<div class="related-list-border-bot">
		&nbsp;
	</div>
	<div class="related-list-main">
		<div style="display:table-row;width:100%">
			<div class="related-list-title">
				<a href="#">Food Production Apparatus, the Production of Food and Novel Food Product</a>
			</div>
			<div class="related-list-sno">
				6
			</div>
		</div>
	</div>
	<div class="related-list-border-bot">
		&nbsp;
	</div>
	<div class="related-list-main">
		<div style="display:table-row;width:100%">
			<div class="related-list-title">
				<a href="#">Food Production Apparatus for the Production of Food and Novel Food Product</a>
			</div>
			<div class="related-list-sno">
				7
			</div>
		</div>
	</div>
	<div class="related-list-border-bot">
		&nbsp;
	</div>
	<div class="related-list-main">
		<div style="display:table-row;width:100%">
			<div class="related-list-title">
				<a href="#">Food Ingredients and Food Products Treated with an Oxidoreductase and Methods for Preparing Such Food Ingredients and Food Products</a>
			</div>
			<div class="related-list-sno">
				8
			</div>
		</div>
	</div>
	<div class="related-list-border-bot">
		&nbsp;
	</div>
	<div class="related-list-main">
		<div style="display:table-row;width:100%">
			<div class="related-list-title">
				<a href="#">Food Interleaver, Method for Imparting Flavor to Food Product, and Combination Food Product and Food Interleaver</a>
			</div>
			<div class="related-list-sno">
				9
			</div>
		</div>
	</div>
	<div class="related-list-border-bot">
		&nbsp;
	</div>
	<div class="related-list-main">
		<div style="display:table-row;width:100%">
			<div class="related-list-title">
				<a href="#">Liquid Food and Non-liquid Food</a>
			</div>
			<div class="related-list-sno">
				10
			</div>
		</div>
	</div>
	<div class="related-list-border-bot">
		&nbsp;
	</div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

您需要在标题中添加vertical-align:middle，并在数字vertical-align:top中添加table-cell，因为baseline默认情况下已对齐float

注意：不要将table-cell与.related-list-main { width: 300px; display: table; padding: 10px; } .related-list-title { font: 12px Verdana, Arial, san-serif; display: table-cell; width: 85%; text-align: left; /* color: #337ab7; */ vertical-align: middle } .related-list-sno { font: 22px Verdana, Arial, san-serif; color: #A51F1D; display: display: table-cell; width: 15%; text-align: right; vertical-align: top } .related-list-border-bot { border-bottom: 1.5px solid #eceaea; margin: 0 0px; height: 1.5px; text-align: center; }混合

＆＃13;
＆＃13; 
<div id="patents" class="tab-pane in active ">
  <div class="related-list-main">
    <div style="display:table-row;width:100%">
      <div class="related-list-title">
        <a href="#">Sea Food Flavored Food Products</a>
      </div>
      <div class="related-list-sno">
        1
      </div>
    </div>
  </div>
  <div class="related-list-border-bot">
    &nbsp;
  </div>
  <div class="related-list-main">
    <div style="display:table-row;width:100%">
      <div class="related-list-title">
        <a href="#">Food Ingredients and Food Products Treated with an Oxidoreductase and Methods for Preparing Such Food Ingredients and Food Products</a>
      </div>
      <div class="related-list-sno">
        2
      </div>
    </div>
  </div>
  <div class="related-list-border-bot">
    &nbsp;
  </div>
  <div class="related-list-main">
    <div style="display:table-row;width:100%">
      <div class="related-list-title">
        <a href="#">Food and Process for Producing Food</a>
      </div>
      <div class="related-list-sno">
        3
      </div>
    </div>
  </div>
  <div class="related-list-border-bot">
    &nbsp;
  </div>
  <div class="related-list-main">
    <div style="display:table-row;width:100%">
      <div class="related-list-title">
        <a href="#">Prepared Food for Functional Food</a>
      </div>
      <div class="related-list-sno">
        4
      </div>
    </div>
  </div>
  <div class="related-list-border-bot">
    &nbsp;
  </div>
  <div class="related-list-main">
    <div style="display:table-row;width:100%">
      <div class="related-list-title">
        <a href="#">Food Ingredients and Food Products Treated with an Oxidoreductase and Methods for Preparing Such Food Ingredients and Food Products</a>
      </div>
      <div class="related-list-sno">
        5
      </div>
    </div>
  </div>
  <div class="related-list-border-bot">
    &nbsp;
  </div>
  <div class="related-list-main">
    <div style="display:table-row;width:100%">
      <div class="related-list-title">
        <a href="#">Food Production Apparatus, the Production of Food and Novel Food Product</a>
      </div>
      <div class="related-list-sno">
        6
      </div>
    </div>
  </div>
  <div class="related-list-border-bot">
    &nbsp;
  </div>
  <div class="related-list-main">
    <div style="display:table-row;width:100%">
      <div class="related-list-title">
        <a href="#">Food Production Apparatus for the Production of Food and Novel Food Product</a>
      </div>
      <div class="related-list-sno">
        7
      </div>
    </div>
  </div>
  <div class="related-list-border-bot">
    &nbsp;
  </div>
  <div class="related-list-main">
    <div style="display:table-row;width:100%">
      <div class="related-list-title">
        <a href="#">Food Ingredients and Food Products Treated with an Oxidoreductase and Methods for Preparing Such Food Ingredients and Food Products</a>
      </div>
      <div class="related-list-sno">
        8
      </div>
    </div>
  </div>
  <div class="related-list-border-bot">
    &nbsp;
  </div>
  <div class="related-list-main">
    <div style="display:table-row;width:100%">
      <div class="related-list-title">
        <a href="#">Food Interleaver, Method for Imparting Flavor to Food Product, and Combination Food Product and Food Interleaver</a>
      </div>
      <div class="related-list-sno">
        9
      </div>
    </div>
  </div>
  <div class="related-list-border-bot">
    &nbsp;
  </div>
  <div class="related-list-main">
    <div style="display:table-row;width:100%">
      <div class="related-list-title">
        <a href="#">Liquid Food and Non-liquid Food</a>
      </div>
      <div class="related-list-sno">
        10
      </div>
    </div>
  </div>
  <div class="related-list-border-bot">
    &nbsp;
  </div>
</div>
＆＃13; 
String text = "Ronaldo is the #best player in the #world. http://www.google.de";
String textWithoutHashtags = text.replace("#", "");
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题