Fatal编程技术网
  • html/
  • 如何在html中对齐div框？

如何在html中对齐div框？

html css

如何在html中对齐div框？,html,css,Html,Css,我曾尝试为div-box提供响应性设计。但是没能得到它 我得到了这样的输出 当我试图扩展它时，它是这样显示的 无法得到响应的一个 在firefox中尝试使用ctrl+shift+m 这是我的密码 index.html <!doctype html> <html> <head> <meta charset="utf-8"> <style> .tab_list_common{ font-family: Arial; font-

我曾尝试为div-box提供响应性设计。但是没能得到它

我得到了这样的输出

当我试图扩展它时，它是这样显示的

无法得到响应的一个

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


.tab\u列表\u通用{
字体系列：Arial；
字体大小：13px；
字体大小：粗体；
颜色：#666666；
线高：1.3；
边框：1px实心#000000；
显示：内联块；
}
.com_div{
文本对齐：居中；
宽度：100%；
}
.外部{
边框：1px实心#000000；
线高：50px；
宽度：100%；
文本对齐：居中；
}
$1.00            
$2.00            
$3.00            
$4.00
您必须将它们显示为
内联块
，消除它们之间的白色间距，并将
宽度设置为：（总宽度/元素）

设置
框大小：边框框将在宽度计算中包括边框

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



.tab\u列表\u公共{
字体系列：Arial；
字体大小：13px；
字体大小：粗体；
颜色：#666666；
线高：1.3；
边框：1px实心#000000；
显示：内联块；
宽度：20%；/*总宽度/元素*/
利润率：0.2.5%；
显示：内联块；
框大小：边框框；
}
.com_div{
文本对齐：居中；
宽度：100%；
}
.外部{
边框：1px实心#000000；
线高：50px；
宽度：100%；
文本对齐：居中；
}



$1.00$2.00$3.00$4.00


此技术使用
文本对齐：justify，该div应用于内联块元素

CSS

HTML



$1.00
$2.00
$3.00
$4.00



它需要在底部有一个span div以保持稳定性，div需要在自己的行上，或者在标记之间有一个空格。要了解更多有用的技术，请参见此。
“响应性”只是指适应不同的媒体和分辨率。看起来做得很好。如果它不能按你所希望的方式工作，那么在描述它时要比“我希望它能响应”更具体，这类似于说“我想要一辆能开的车”，并期望我们猜测你想要哪个品牌和型号；它将扩展div框的内容。但在我的例子中，它不是在扩展，而是在显示中心。我需要在每个框和每个框之间留出一些空间。我没有使用nbspif，而是在尝试使用较大的像素时给每个框20%的宽度。它没有响应，还有一件事，我如何使div框成为选中框？例如，如果我选择$1.00框，它应该显示为红色边框，如border:2px solid#（红色六边形值）我在css样式中尝试过这样的方式…tab_inv_dtval:checked{border:5px solid#FFFFFF；}你可以使用checkbox+label或更好地使用javascript来实现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;
}



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