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

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ć.

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