如何在html中对齐div框?

问题描述 投票:1回答:2

我试图获得div盒的响应式设计。但无法得到它。

我有这样的输出..

当我试图扩展它时,它显示为这样。

无法得到回应...

在firefox中尝试使用ctrl + shift + m。

这是我的代码

的index.html

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.tab_list_common{
font-family: Arial; 
font-size: 13px; 
font-weight: bold;
color: #666666; 
line-height: 1.3;
border: 1px solid #000000;
 display: inline-block; 
}
.com_div{
text-align: center;
width: 100%;
}
.outer{
border: 1px solid #000000;
line-height: 50px;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="com_div">
<span class="tab_list_common">$1.00</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="tab_list_common">$2.00</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="tab_list_common">$3.00</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="tab_list_common">$4.00</span>
</div>
</div>
</body>
</html>
html css html5 css3
2个回答
1
投票

你必须将它们显示为inline-block,消除它们之间的白色间距并将width设置为:(总宽度/元素)。

设置box-sizing: border-box;将包括宽度计算中的边框。

编辑:使用边距添加div之间的间距。

.tab_list_common{
  font-family: Arial; 
  font-size: 13px; 
  font-weight: bold;
  color: #666666; 
  line-height: 1.3;
  border: 1px solid #000000;
  display: inline-block;
  width: 20%; /* total width / elements */
  margin: 0 2.5%;
  display: inline-block;
  box-sizing: border-box;
}
.com_div{
  text-align: center;
  width: 100%;
}
.outer{
  border: 1px solid #000000;
  line-height: 50px;
  width: 100%;
  text-align: center;
}
<div class="outer">
  <div class="com_div">
   <span class="tab_list_common">$1.00</span><!--
--><span class="tab_list_common">$2.00</span><!--
--><span class="tab_list_common">$3.00</span><!--
--><span class="tab_list_common">$4.00</span>
  </div>
</div>

1
投票

Try this JSFiddle

此技术在.outer div上使用text-align:justify;,它适用于内联块元素。

CSS

.outer {
    border: 1px solid #000000;
    width: 100%;
    text-align:justify;
    -ms-text-justify:distribute-all-lines;
    text-justify:distribute-all-lines;
    min-width:13em;  /* add this if you don't want the divs to wrap when the screen size is reduced */
}
.com_div {
    padding:.95em .95em 0em .95em;
    line-height:1;
}
.tab_list_common {
    font-family: Arial;
    font-size: .82em;
    font-weight: bold;
    color: #666666;
    border: 1px solid #000000;
    display: inline-block;
    vertical-align:top;
}
.stretch {
    width:100%;
    display:inline-block;
    font-size:0;
    line-height:0;
}

HTML

<div class="outer">
<div class="com_div">
<span class="tab_list_common">$1.00</span>
<span class="tab_list_common">$2.00</span>
<span class="tab_list_common">$3.00</span>
<span class="tab_list_common">$4.00</span>
 <span class="stretch"></span>
</div>
</div>

它需要一个底部的span div来保持稳定性,div需要在它们自己的行上,或者在标签之间有一个空格。有关更有用的对齐中心技术,请参阅此Stack Overflow question

© www.soinside.com 2019 - 2024. All rights reserved.