"Div" в "a" неправильно. Отже, як я можу це зробити? (HTML4, CSS2, кросбраузер)

Я цей :

HTML

<div class="temperatura">
    
        <div style="padding-left:12px;">
            Text1
        </div>
    

    
        <div style="padding-right:70px;">            
            Text2
        </div>
            
</div>

CSS

.temperatura
{
    height:34px;
    position:relative;
    background-color:#FF0000;
    font-size:14px;
    font-weight:bold;
}

.temperatura_localita
{
    width:50%;
    height:34px;
    line-height:34px;
    float:left;
    text-decoration:none;
}

.temperatura_dettagli
{
    width:50%;
    height:34px;
    line-height:34px;
    float:left;
    text-align:right;
    text-decoration:none;
}

Мені потрібен два зв'язувальних елемента (по 50% кожен) з лівою (перший) та правий (другий).

Єдина стратегія, я знаю, полягає в тому, щоб зробити два a (floatted) з внутрішніми divs з padding.

Але це "неправильно". Як же я можу це зробити?

EDIT

The other solution is just change the internal div (the ones with padding) with span :

http://jsfiddle.net/p8Mps/3/

Але спробуйте збільшити/зменшити вікно в IE7: це не вдасться ...

3
Ви не можете додати повзунки до елементів 50%: він також займе пробіл для заповнення і створить нову лінію. Я думав, це було ясно ...
додано Автор markzzz, джерело
@markzzz Чому б ви не просто визначили наповнення елементів якоря самі?
додано Автор Šime Vidas, джерело
Любите дивитись розмови про відмінності між HTML4 і HTML5, які не містять згадки про кожну версію.
додано Автор BoltClock, джерело
Чому це "неправильно"? Afaik, може містити лише вбудовані елементи, а не елементи рівня блоку. Таким чином, a div (говорить css) є "некоректним" (за DTD)
додано Автор knittl, джерело
@Sidnicious: можливо, в HTML5 (це ще остаточно?). Я насправді говорив про HTML4 (не згадав про це)
додано Автор knittl, джерело
@knittl: елемент має прозора модель вмісту , що означає, що вона може містити що-небудь, що може містити його батько, включаючи елементи рівня блоку.
додано Автор s4y, джерело
@Sidnicious: специфікації HTML 4.01 , що елементи можуть містити лише вбудовані елементи. <div> - це елемент рівня блоку, тому він не повинен з'являтися в .
додано Автор Sparky, джерело

4 Відповіді

Я зробив би "теги"

display: block;

Це дасть вам змогу стильувати їх так, як якщо б вони були тегами div, і ви можете додавати накладки вліво та підкладки відповідно до них.

2
додано
Так, я також можу створити ці стилі так, як я хочу, оскільки вони є float: left;
додано Автор markzzz, джерело

(anchors) are inline elements.

<div> (divisions) are block level elements.

HTML 4.01 specifications state that elements may only contain inline elements. A <div> is a block level element, so it must not appear inside an .

Never put block level elements inside inline elements.

You would put inline elements inside block level elements instead...

<div class="temperatura">
    <div style="padding-left:12px;">
        
            Text1
       
    </div>
    <div style="padding-right:70px;">
              
            Text2
         
    </div>       
</div>

EDIT based on OP's comments...

http://jsfiddle.net/sparky672/p8Mps/9/

<div class="temperatura">
    <div class="temperatura_localita">
        
            Text1
       
    </div>
    <div class="temperatura_dettagli">
              
            Text2
         
    </div>       
</div>

EDIT 2 based on further comments...

http://jsfiddle.net/sparky672/p8Mps/13/

<div class="temperatura">
    
        Text1 

     
        Text2    
</div>
1
додано
Ухм: насправді вони різні питання ... Спасибі вам у будь-якому випадку ...
додано Автор markzzz, джерело
НІ! :) Спробуйте запустити його в IE7 і збільшити-зменшити вікно: він не працює. Я також відкрив дискусію про цю проблему stackoverflow.com/questions/7918536/…
додано Автор markzzz, джерело
Не те, що я шукаю Sparky672: temperatura повинен бути пов'язаний ... весь "контейнер" :)
додано Автор markzzz, джерело
О, добре. Тепер я бачу У будь-якому випадку, останній параметр має іншу поведінку: весь контейнер (div) насправді не "пов'язаний" як моє приклад.
додано Автор markzzz, джерело
Я збентежений: Чому ваш приклад працює? Це дивно. Насправді, виведення маржи на таблицю стилів CSS не виконує jsfiddle.net/p8Mps/6 . Що відбувається?
додано Автор markzzz, джерело
Це виглядає жахливо - це неправильно з семантикою (div в a)
додано Автор markzzz, джерело
?? Мені потрібні вбудовані. Мені потрібно 50% обидва: додавання пробілу до href поставить в два рядки елементи.
додано Автор markzzz, джерело
@ markzzz, чому б не використовувати поля, а не проміжку? Потім залиште внутрішній div у коду 50% і покладіть поля в теги . Перегляньте відредаговану відповідь та скрипку ... jsfiddle.net/sparky672/p8Mps/8
додано Автор Sparky, джерело
@ Markzzz, будь ласка, не публікуйте дубльовані запитання. Один, швидше за все, буде закритий.
додано Автор Sparky, джерело
@ Markzzz, здається, працює так, як ви хочете ... jsfiddle.net/sparky672/p8Mps/13
додано Автор Sparky, джерело
@ Markzzz, перегляньте мою оновлену скрипку, помістіть маржиновий стиль у CSS . Як правило, ви не бачите цілі контейнери (рівень блоків) як налаштовувані посилання, обертаючи їх тегом прив'язки ... ви використовуєте JavaScript, щоб пов'язати подія onclick до всього контейнера. У системах меню, де ви бачите щось подібне, це пов'язано з тим, що зображення обертається якорем, що добре, оскільки зображення вбудоване.
додано Автор Sparky, джерело
@ Markzzz, це не вдається, тому що тепер ви розміщуєте маржу класу, застосованого до div . У моєму прикладі маржа була застосована до .
додано Автор Sparky, джерело

Вам не потрібен контейнер, щоб додати повзунок до якоря. Отже, використовуйте:

<div class="temperatura">
    
        Text1
    

                
        Text2
            
</div>

If you really need a container, change div to span, and add display:block to the span element. After this declaration, the element will "behave" similar to the <div> element.

1
додано
Перевірте моє EDIT на питання. Ви не потребуєте дисплея: блок для внутрішнього інтервалу, але не в IE7 при прокручуванні ...
додано Автор markzzz, джерело
Я бачу, що я просто використовую замість div: він отримує заповнення. Але в IE7, 50% на опущеному прольоті іноді посилюється ...
додано Автор markzzz, джерело
@markzzz Інший метод полягає в використанні властивостей display , див. jsfiddle.net/ p8Mps/7
додано Автор Rob W, джерело

Візьміть до уваги коментар Knittl. Я можу думати про 2 можливих рішення:

1) Використовуйте лише теги div (без тегів a ) та використовуйте атрибут onclick , щоб перенаправити на потрібний URL.

2) Додайте display: block до CSS a і опустіть div . Потім створіть потрібні теги

1
додано
Ні. Ви не можете помістити div у елемент. Невірно. Можливо, Firefox може виправити цю помилку, але IE не зробить цього. Крім того, я уникаю JavaScript ...
додано Автор markzzz, джерело
Soluton 1 отримує доступ до "F" (як користувачі, які здійснюють навігацію за допомогою клавіатури, значно менше, користувачі, які використовують дані з екрана, мають доступ до цих посилань?)
додано Автор steveax, джерело
@steveax: це правда, це зазвичай погана практика. Просто згадав про це ...
додано Автор CdB, джерело
Ось що я сказав, використовуйте a або div , а не div в a . У всякому разі, я думаю, це не надто складно, якщо ви граєте з ним, вам вдасться зробити те, що хочеш;)
додано Автор CdB, джерело