1

我想要一个几乎与表格布局完全相同的布局，但我知道我应该使用 div 来实现这种布局，元素之间有间距： 在此处输入图像描述

我执行上述操作的代码是

<div class="fl20">Personen är sökande i:</div>
        <div class="fl450">
        <table border="0" cellpadding="10"><tr><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="alla">Alla länder
        </td><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="alla_utom_usa">Alla utom USA
        </td><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="endast_usa">Endast USA
        </td><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="land"><input type="text" size="12" value="<%= editPerson.getReferens() %>" name="<%= PandoraFieldConstants.FIELD_REFERENS %>">
        </td></tr>
        </table>
        </div>

现在标签行和字段行不对齐，所以我想删除表格并改用 div 以获得更好的解决方案，但是当我使用 div 代替时，字段将显示在新行上。我该怎么做？我的 CSS 是

*  {font-family:arial;}

.avnamn{ 
                color: #90002b; 
                font-size: 140%; 
                display: inline; 
                vertical-align: 3%; 
                margin-left: 1%;
                }

.b{border:1px solid #000;}

.readonly{background-color: #CCC;}

.Webdings{
    font-family: Webdings;
    }

ul{margin-top: 0px}

.mt3{margin-top:-3px;}
.mt5p{margin-top:5px;}

.fontS80 {font-size: 80%;} 
a:link{color:#000; text-decoration:none; }
a:visited{color:#000; text-decoration:none; }
a:hover{color:#000; text-decoration:none; }
a:active{color:#000; text-decoration:none; }

.fontS75 {font-size: 75%;} 

.link{color: #003366;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;}

.link_sm{color: #003366;
    text-decoration: underline;
    cursor: pointer;}

.link_sm{font-size: 70%;cursor: pointer;}

.small{font-size: 75%;}

.smallg{font-size: 75%;
color: #555;}

.ssmall{
    font-size: 65%;
    font-weight: bold;
    color: #555;
}
.small60{font-size: 60%;}
.small50{
    font-size: 50%;
    color: #333;
}
.smallb{font-size: 85%;}
table{display:inline;}

h1{font-size: 130%;display:inline;}
h2{font-size: 100%;display:inline;}
h3{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}
h4{font-size: 70%;display:inline;}
h5{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}

.hthin{
    font-size: 125%;
}

.th {text-align: left;}

td, th{font-size: 75%;
    vertical-align: text-top;}
.td_link{cursor: pointer;}
.td40{height:40px;}
.td60{height:60px;}



.thkant{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 70%;
        text-align: left;
}

.labb{F0F0E3; c1c1b3 }

.bb{border-bottom: 1px solid #000;}
.bbV{border-bottom: 1px solid #FFF;}
.TB_nbA {background-color:#CCC;}
.TB_bt, .TB_nb, .TB_db, .TB_bb {background-color:#efefdc;}

.hk {background-color:#d9ddb3;}

.hknot {background-color:#f9faf2;}
/*<!--F8F8F1-->*/
.TB_bt{border-top: 1px solid #FFF;}
.TB_bt5{border-top: 5px solid #FFF;}
.TB_bb{border-bottom: 1px solid #999;}
.TB_bb2{border-bottom: 2px solid #c1c1b3;}
.TB_db{border-bottom: 1px solid #000; border-top: 1px solid #000;}
.TB_tb{border-top: 2px solid #efefdc;}

.TB_bo{border: 2px solid #efefdc;}
.TB_bo_hk{border-top: 1px solid #efefdc;}


.TB_bo2{border: 1px solid #efefdc;}

.TB_bo2B{
border-top: 2px solid #c1c1b3;
border-left: 3px solid #efefdc;
border-right: 3px solid #efefdc;
border-bottom: 2px solid #c1c1b3;
}

.TD_bo{
    border-right: 1px solid #c1c1b3;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.TD_bo2{

    border-right: 0;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.ytb{
    border-left:3px solid #efefdc;
    border-right:3px solid #efefdc;
}

.datum {
    font-size: 70%;
    padding-right: 5px;
    vertical-align: text-top;} 
.sub {background:#EAEAEA;}
.sub_meny, .sub_meny_r, .sub_meny_active, .sub_meny_sm{
    font-size: 70%;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: text-top;}

.sub_meny_sm {
    font-size: 60%;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
}   

.sub_meny_r{
    float:right;
    font-size: 70%;
    padding-left: 8px;
    padding-right: 8px;}

.sub_meny_rm{margin-top:4px;}
.sub_meny_active{font-weight: bold;}

.flikkant1 {
    background-image: url(../images/fl1k.jpg);
    background-position: center;
    z-index: -1;}

.inl_namn{
    font-weight: bold;
    font-size: 70%;
    color: Black;
    text-decoration: none;}

.th{text-align: left;}
.tr{text-align: right;}

.g1{
    background-color: #FFF;
    line-height: 20px;
}

.g2{
    background-color: #EEE;
    line-height: 20px;
}

.g3{
    background-color: #DCDCDC;
    line-height: 20px;
    font-weight: bold;
    font-size: 100%;
}
.g4{
    background-color: #CCC;
    line-height: 20px;
}

.popup{
    border-color: #000; 
    border-style: groove; 
    border-width: 2px; 
    padding: 0px; 
    background-color: #FFF;
    font-size: 70%;
}

.popuphandlaggare{ 
    border-color: #000;
    border-style: groove;      
    border-width: 2px;      
    padding: 0px;      
    background-color: #FFF;     
    font-size: 70%;     
    position: absolute;     
    top: 900px; 
    }

.popupN{
    background-color: #F0F0E3;
    color: #000;
    width: 100%;
    display: inline;
    font-weight: bold;
    height: auto;
    padding: 2px;
    border-bottom: 1px solid #000;
}
.pin{padding: 6px;}

.fl10, .fl20, .fl30, .fl40, .fl50, .fl60, .fl70, .fl80, .fl90, .fl100 {
    padding-bottom:4px;color: #000000;
}

.over{
    background-color: #EFEFDC;
    line-height: 20px;
}

.half{
line-height:50%;
}

.quarter{
line-height:25%;
}

.lh10{
line-height:10%;
}

.checkmargin {margin-right: 25px;}  
.checkmarginL {margin-left: 25px;}  

.pusher {padding-left: 15px;"}
.pusherR {margin-right: 40px;"}

.rand3{background-color: #FFF; line-height: 3px;}
.rand1{background-color: #FFF; line-height: 1px;}

.whiteborder {     color: #ffffff;      border: 4px solid #ffffff;      padding: 10px;      margin: 10px; }
#details { width: 700; color: #ffffff; }
.column1 {     color: #000000; margin: 0;      padding: 0;     width: 600px;     border:0;     float: left; }
.column2 {     color: #000000;margin: 0;      padding: 0;     border:0;     width: 80px;     float: right; }

.f200 {
    color: #000000;
}

.f210 {
    color: #000000;float: left;
}
.f220 {
    width: 400;
}
.f1450 {
    width: 800;
}
.f1550 {
    width: 150;
}
.b2{border:2px solid #efefdc;}
.inp_sel{width: 80%;}


.form-bg {
  background: #eeefdf;
  width:1000px;
  overflow:hidden;
}

.data-bar {
  border-bottom:1px solid #fbfbf7;
  display:inline-block;
  padding:10px 10px;
}

.left {
float:left;
width:200px;

}

.right {
float:right;
width:700px;
}

.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
#table td { 
margin:120px; 
} 

#personName {     float:left;     width:300px;   }  #otherDetails {     float:right;     width:450px;      }

.th_rad_sort {border-bottom: 2px solid #000000;}

a img { border: 0; outline:0;}
4

7 回答 7

3

CSS

.fl20{float:left; padding:5px; margin:5px; width:120px;}
.fl450{float:left; padding:5px; margin:5px; width:450px;}

HTML

<div class="fl20">Personen är sökande i:</div>
<div class="fl450">
    <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="alla">Alla länder
</div>
<div class="fl450">
    <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="alla_utom_usa">Alla utom USA
</div>
<div class="fl450">
    <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="endast_usa">Endast USA
</div>
<div class="fl450">
    <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="land">
    <input type="text" size="12" value="<%= editPerson.getReferens() %>" name="<%= PandoraFieldConstants.FIELD_REFERENS %>">
</div>
于 2012-05-04T07:31:41.643 回答
2

简单的解决方案是使用表格，在行的第一个单元格中包含文本“Personen är sökande i:”。

但是您也可以简单地使用一个div元素来做到这一点，其中只有span元素，使用填充将备选方案分开。您现在可能正在使用一些不必要的复杂标记（未披露）。而是从干净的办公桌开始。

（通过将每个备选方案放在单独的行或行上，可以获得更好的可访问性。）

于 2012-05-04T07:24:55.123 回答
1

您应该减小 div 的宽度并使其向左浮动。例如，如果您想在一行中使用 div，则使每个 div 的宽度为 25% 并添加属性 float:left。他们将排成一行

于 2012-05-04T07:21:19.997 回答
1

您可能想要查看不同的显示类型。可以给任何元素一个表格、表格单元格、表格列显示。 参考

于 2012-05-04T07:23:38.793 回答
0

我不明白为什么需要将 div 用于与表格一起使用时更易于管理的东西。

<table border="0" cellpadding="10"><tr><td>
        Personen är sökande i:   
        </td><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="alla">Alla länder
        </td><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="alla_utom_usa">Alla utom USA
        </td><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="endast_usa">Endast USA
        </td><td>
        <input type="radio" name="<%= PandoraFieldConstants.FIELD_SOKANDE_I %>" value="land"><input type="text" size="12" value="<%= editPerson.getReferens() %>" name="<%= PandoraFieldConstants.FIELD_REFERENS %>">
        </td></tr>
</table>

更新：在那种情况下仍然是 div，不需要。使用和查看此演示<ul><li>

于 2012-05-04T07:35:04.377 回答
0

字段集对此非常方便。看看我为你做的这个例子：

http://jsfiddle.net/Vdrhs/

于 2012-05-04T07:46:38.283 回答
0

为什么不使用列表？

Stack Over flow 为下图部分执行此操作，请从浏览器中检查其源代码。

在此处输入图像描述

于 2014-03-13T05:45:04.750 回答