Question

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

我得到了这样的输出..

enter image description here

当我尝试展开它时，它显示为这样。

enter image description here

无法得到回应......

在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>

Answer 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>

Answer 2

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。

如何在html中对齐div框？

2 个答案: