Div в неупорядоченный список - хорошая практика?


Я хочу сделать форму, которая выглядит так:

     Column A      Column B
1   Textbox AA    Textbox BB
2   Textbox AA    Textbox BB

Я запрограммировал его так:

             <form id="deps" name="deps" action="" method="POST">  
                 <ul>
                    <li>
                    <span class="er">&nbsp;</span>
                    </li> <br />

                    <li>
                    <div class="field">&nbsp;</div>
                    <div class="field cv"><label for="met">A</label>  </div>
                    <div class="field cv"><label for="eng">B</label> </div>  
                    </li> <br />

                    <li>
                    <div class="field head"> <label for="bd">1</label> </div>
                    <div class="field"><input type="text" name="bdmm" id="bdmm" /> <label for="bdmm">M</label> </div>
                    <div class="field"><input type="text" name="bdinch" id="bdinch" /> <label for="bdinch">I</label> </div>
                    </li> <br />

                    <li> 
                    <div class="field head"> <label for="sd">2</label> </div>
                    <div class="field"><input type="text" name="sdmm" id="sdmm" /> <label for="sdmm">M</label> </div>
                    <div class="field"><input type="text" name="sdinch" id="sdinch" /> <label for="sdinch">I</label> </div>
                    </li>  <br />

                    <li> 
                    <div class="field head"><label for="tw">TW</label>  </div>
                    <div class="field"><input type="text" name="twkg" id="twkg" /> <label for="twkg">KG</label> </div> 
                    <div class="field"><input type="text" name="twlbs" id="twlbs" /> <label for="twlbs">LBS</label></div>
                    </li>  <br />
                </ul>
                    <input type="submit" value="Calculate" onclick="getText();" />  
              </form> 

Усс:

form{
    padding:3px 0;
    font-family: Georgia, arial, serif;
}

ul {
    list-style: none;
}

ul li {
    clear:both;
    margin:0px;
    padding:2px 0px;
    vertical-align: middle;
}

input{  
    font-size: 1em;
    margin: 5px;
    padding: 5px 8px;  
    border: solid 1px #E5E5E5;  
    outline: 0;  
    width: 100px; 
    }  

input:focus {  
    border: solid 1px #8CDED7;  
    }  

label {  
    margin: 2px;
    padding: 2px;  
    text-align: right;
    font-size: 1em; 
    text-shadow: 0px 1px 0px #e5e5ee;
    display: inline-block;

    }  

label, input, h4 {
    letter-spacing: 1.5px;
    line-height: 20px; 
    font-family: Georgia, 'Times New Roman';
    text-transform: uppercase;
}

.field {
    float: left;
    display:inline-block;
    width:  200px;
    vertical-align: middle;
}
.head {
    padding-top: 5px;
}

.er {
    font-size: 1em;
    margin-right: 10px;
    padding: 8px; 
    background: #CC0000;
    color: #F7F7F7;
    float:right;
}   

.cv {
    float: left;
}   
input[type=submit]{
    margin-top: 35px;
    padding: 9px;
    width: auto;
    text-align: center;
    cursor:pointer;
    font-family:  Georgia, arial, serif;
    font-size: 1em;
    color: #565463;
    background: #8CDED7;
    border: 2px solid #8CDED7;
    text-shadow: 0px 1px 0px #e5e5ee;
}

Это прекрасно работает, как я хочу: http://jsfiddle.net/4kWdQ/. Но я хотел бы знать, если положить div в неупорядоченный список-это хорошая практика или нет? И в любом случае я могу улучшить код CSS?



4495
7
задан 29 октября 2011 в 04:10 Источник Поделиться
Комментарии
2 ответа

ДИВС любого рода-что-то вроде "меньшего зла" - они не несут никакой смысловой информации и должны использоваться только тогда, когда (1) нужно есть элемент и (2) нет никакой смысловой эквивалент.

В этом случае, у вас есть семантический эквивалент. У вас есть строки, столбцы, заголовки...данных, которые должны быть организованы в строки/столбцы и заголовки, или это не имеет смысла...что у вас здесь является истинным таблице ФИДЕ. И он должен быть закодирован как один, а не как список дивов. ("Столы плохие, CSS хорош" относится к макет таблицы, а не таблицы в целом. Если у вас есть табличные данные, поставив его на стол просто не имеет смысла.)

12
ответ дан 29 октября 2011 в 06:10 Источник Поделиться

И добавить к ЧАО комментарий, используя таблицу для ваших целей поможет в создании конструкции, которые дадут вам определенные интервалы или клетки, чтобы работать с, что вы можете добавить в набивку/marging через классы CSS вместо того, чтобы добавить лишние теги, как

Цель я пытаюсь установить меньше или оптимальной разметки HTML, возможно, так оно чистое и CSS определяют внешний вид. Надеюсь, что это помогает.

4
ответ дан 30 октября 2011 в 05:10 Источник Поделиться

Другие вопросы по теме
Новичок в jQuery – основы кодирования / производительность
19 октября 2011 в 04:10
Игры Кубок Короля
12 октября 2011 в 09:10