Czy wysokość i szerokość nie dotyczą rozpiętości?

254

Pytanie totalne noob, ale tutaj.

CSS

.product__specfield_8_arrow {

    /*background-image:url(../../upload/orng_bg_arrow.png);
    background-repeat:no-repeat;*/
    background-color:#fc0;
    width:50px !important;
    height:33px !important;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-topleft:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
    cursor:pointer;
}​​​

HTML

<span class="product__specfield_8_arrow">&nbsp;</span>​

Skrzypce

Zasadniczo próbuję emulować przycisk, aby rozpiętość (lub coś takiego) wyglądała jak przycisk obok pola wprowadzania, które tak naprawdę nie musi być jednym z powodu generatora automatycznego wypełniania, który generuje błędy na wejściu. Pomyślałem, że to na razie szybkie rozwiązanie, ale oczywiście nie.

Dzięki.

css html width Kyle
źródło
2
Możesz także sprawdzić stackoverflow.com/questions/2343989/...
Edan Maor
2
Sprawdź także standard, w szczególności w3.org/TR/CSS2/visudet.html#the-width-property i w3.org/TR/CSS2/visudet.html#the-height-property , które określają właściwości „Dotyczy: wszystkie elementy oprócz niewymienionych elementów wbudowanych, wierszy tabeli i grup wierszy ”
poza

Odpowiedzi:

426

Rozpiętość jest elementem wbudowanym. Nie ma szerokości ani wysokości.

Możesz przekształcić go w element na poziomie bloku, a następnie zaakceptuje on twoje dyrektywy wymiarowe.

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}
Basheer AL-MOMANI
źródło
9
Dzięki, naprawiłem to. Próbowałem display: blok wcześniej, ale blok wbudowany naprawił to.
Kyle
21
To jest problem. Jeśli display: blockjest określony, rozpiętość przestaje być elementem wbudowanym, a element pojawia się po pojawieniu się w następnym wierszu. Potrzebuję elementu, który jest wbudowany, ale może mieć pożądaną szerokość.
Paul
6
lepszym rozwiązaniem jest wyświetlenie użytkownika: blok wbudowany
Anant
37

Spróbuj użyć divzamiast spanlub za pomocą CSS display: block;lub display: inline-block;- spanjest domyślnie elementem wbudowanym, którego nie można pobrać widthi heightwłaściwości.

Izaak
źródło
9
div nie jest semantycznym zamiennikiem zakresu. Rozpiętość jest kontenerem tekstowym, natomiast div jest kontenerem układu. Prawidłową odpowiedzią jest zastosowanie stylu blokowego, takiego jak grafika deweloperska.
Brian Scott
3
Pytanie nie zawiera kontekstu wskazującego, że div jest z natury niewłaściwy semantycznie.
Izaak
1
W rzeczywistości po odczytaniu znacznika operacji wygląda to tak, jakby dany element służył do wyświetlania obrazu tła. W takim przypadku div byłby bardziej odpowiedni. -1 usunięto z oryginalnego komentarza Izaaka.
Brian Scott
Ponadto próbowałem użyć div przed przejściem do zakresu, zawsze wyświetla się pod poprzednim divem. Więc poszedłem ze Span :)
Kyle
22

Zainspirowany przez @Hamed, dodałem następujące i zadziałało to dla mnie:

display: inline-block; overflow: hidden;
olleh
źródło
11

Rozpiętość przyjmuje szerokość i wysokość tylko wtedy, gdy zrobimy z niej element blokowy.

span {display:block;}
Touhid Rahman
źródło
14
Myślę, że display: inline-block;jest lepiej
151291,
W ten sposób zmienisz dla wszystkich zakresów, zaleciłbym użycie klasy.
Hola Soy Edu Feliz Navidad
9

Zgodnie z komentarzem @Paul, jeśli określono display: block, span przestaje być elementem wbudowanym, a element pojawia się po pojawieniu się w następnym wierszu.

Przybyłem tutaj, aby znaleźć rozwiązanie mojego problemu z wysokością przęsła, i mam własne rozwiązanie

Dodanie go overflow:hidden;i wstawienie go rozwiąże problem właśnie przetestowany w trybie dziwactwa IE8

Hamed Ali Khan
źródło
Ciągle widzę overflow:hidden;w tym kontekście. „Treść jest obcinana, bez pasków przewijania”, mówi MDN . Wydaje się sprzeczne z intuicją. Co on tu robi?
Bob Stein
8

spans są domyślnie wyświetlane w linii, co oznacza, że ​​nie mają wysokości i szerokości.

Spróbuj dodać a display: blockdo swojego zakresu.

Edan Maor
źródło
6

Rozpiętość zaczyna się jako element wbudowany. Możesz na przykład zmienić jego atrybut wyświetlania na blok, a atrybuty wysokości / szerokości zaczną obowiązywać.


źródło
2

span {display:block;} dodaje również podział linii.

Aby tego uniknąć, użyj, span {display:inline-block;}a następnie możesz dodać szerokość i wysokość do elementu wbudowanego, a także możesz wyrównać go w bloku:

span {
        display:inline-block;
        width: 5em;
        font-weight: normal;
        text-align: center
     }

więcej tutaj

markling
źródło