«Дзіваў» у «а» з'яўляецца няправільным. Такім чынам, як я магу гэта зрабіць? (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%), кожныя з водступам злева (першы) і справа (другім).

Адзіная стратэгія, якую я ведаю, каб зрабіць два а (floatted) з унутранага дзівай з набіваннем.

Але гэта «няправільна». Так як я магу гэта зрабіць?

<�Моцны> Змяніць

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, можа ўтрымліваць толькі ўбудаваныя элементы, элементы ўзроўня блока. Такім чынам, а DIV (кажучы CSS) з'яўляецца "няправільным" (у DTD)
дададзена аўтар knittl, крыніца
@Sidnicious: можа быць, у HTML5 (гэта канчатковы яшчэ?). Я быў на самай справе гаворым пра HTML4 (не згадаў пра гэта, хоць)
дададзена аўтар knittl, крыніца
@knittl: ў <�код > а элемент мае празрыстая мадэль змесціва , а гэта азначае, што ён можа ўтрымліваць усё, што яго бацька можа ўтрымліваць, у тым ліку элементаў ўзроўню блока.
дададзена аўтар s4y, крыніца

4 адказы

Я хацеў бы зрабіць пазнакі «A»

display: block;

Гэта дасць вам магчымасць афармляць іх, як калі б яны былі DIV тэгі і вы можаце дадаць водступ злева і водступы направа адпаведна.

2
дададзена
так, я магу таксама стылізаваць іх, як я хачу, becuase яны паплавок: злева;
дададзена аўтар 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: тэмпературы павінен быць звязваўся ... ўвесь «кантэйнер» :)
дададзена аўтар markzzz, крыніца
Аб парадку. Цяпер я бачу. Ва ўсякім выпадку, апошні варыянт мае іншае паводзіны: увесь кантэйнер (DIV), на самай справе не «звязаны» ў маім прыкладзе.
дададзена аўтар markzzz, крыніца
Я зьбянтэжаны: O Чаму ваш прыклад працуе? Яго дзіўнае. На самай справе, паклаўшы запас на табліцы стыляў CSS не ўдаецца jsfiddle.net/p8Mps/6 . Што адбываецца?
дададзена аўтар markzzz, крыніца
Гэта выглядае жудасна = гэта няправільна з семантыкай (Div в)
дададзена аўтар markzzz, крыніца
?? Мне трэба іх рядный. Мне трэба 50%, як: даданне водступы да A HREF змесціць у два радкі элементаў а.
дададзена аўтар markzzz, крыніца
@markzzz, чаму б не выкарыстоўваць поля замест пракладкі? Затым пакіньце ўнутраны DIV 's ў 50% кожны і пакласці поля на тэгі. Глядзіце адрэдагаваны адказ і скрыпку ... jsfiddle.net/sparky672/p8Mps/8
дададзена аўтар Sparky, крыніца
@markzzz, калі ласка, не пішыце паўтараюцца пытанні. Адзін, верагодна, будзе зачынены.
дададзена аўтар Sparky, крыніца
@markzzz, Гэта падобна на працу, як вы хочаце ... jsfiddle.net/sparky672/p8Mps/13</а>
дададзена аўтар Sparky, крыніца
@markzzz, Глядзіце маю абноўленую скрыпку, пакласці стыль маржы ў CSS . Як правіла, вы не бачыце цэлыя кантэйнеры (на ўзроўні блокаў) у выглядзе спасылак, атачыўшы іх з якарнага тэгу ... каб звязаць OnClick падзея для ўсяго кантэйнера вы будзеце выкарыстоўваць JavaScript. У сістэме меню, дзе вы бачыце нешта падобнае, гэта таму, што выява абгарнуць з якарам, які добра, таму што малюнак з'яўляецца убудавальным.
дададзена аўтар 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
дададзена
Праверце мой Рэд па гэтым пытанні. Вам не патрэбен дысплей: блок для ўнутранага дыяпазону, але не на IE7 на скролінг ...
дададзена аўтар markzzz, крыніца
Я бачу, што я проста выкарыстоўваць замест дзіў: ён атрымлівае водступы. Але на IE7, 50% на пракладзены пралёце часам смокча ...
дададзена аўтар markzzz, крыніца
@markzzz Іншы метад складаецца ў usespecific дысплей ўласцівасці, <�б> см jsfiddle.net/ p8Mps/7
дададзена аўтар Rob W, крыніца

Узяць каментар knittl іх да разгляду. Я магу думаць аб 2 магчымых рашэнняў:

1) Выкарыстоўвайце толькі DIV 's (без а тэгі), а таксама выкарыстоўваць OnClick атрыбут для перанакіравання на патрэбнай спасылцы.

2) Дадаць дысплей: блок у а CSS і апусціць DIV 'ы. Тады стыль Тха біркі па жаданні

1
дададзена
Не, вы не можаце змясціць дзіваў за элемент. З'яўляецца няправільным. Firefox, магчыма, можа выправіць гэтую памылку, але IE не будзе рабіць гэта. Акрамя таго, я буду пазбягаць JavaScript ...
дададзена аўтар markzzz, крыніца
Soluton 1 атрымлівае «F» ў даступнасці (як бы карыстальнікі плаванне з дапамогай клавіятуры, значна менш Экранных карыстальнікаў гэтых спасылак?)
дададзена аўтар steveax, крыніца
@steveax: гэта праўда, гэта, як правіла, дрэнная практыка. Проста згадаў ...
дададзена аўтар CdB, крыніца
Гэта тое, што я сказаў, выкарыстоўвайце альбо а або Div , а не DIV у а . Ва ўсякім выпадку, я думаю, што гэта не так ужо складана, калі вы пагуляйце з ім вы будзеце кіраваць, каб рабіць тое, што вы хочаце;)
дададзена аўтар CdB, крыніца