Dodawanie elementu przycisku do wypełnienia dostępnej szerokości

Question

Istnieje wiele pytań dotyczących wypełniania dostępnej przestrzeni na tej stronie, ale mój problem jest trochę szczególny, ponieważ już dostałem rozwiązanie, ale nie działa ono dla przycisków . Chciałbym zrozumieć, dlaczego to nie działa dla przycisków i jak mogę to zrobić. Wyobrażam sobie, że jest to tylko element stylu przeglądarki dla elementu przycisku, który muszę zastąpić.

Mam dwa pływające elementy w obrębie (div) o stałej szerokości, jeśli to ma znaczenie). Prawy element ma stałą szerokość, a lewy element powinien zajmować całą szerokość.

Mogę to zrobić, ustawiając odpowiedni element na stałą szerokość i float: right, pozostawiając lewy element bez specjalnej stylizacji. Działa to doskonale dla div. Działa również na przęsła, ale tylko wtedy, gdy ustawię na nich display: block. Dla przycisków nie mogę w ogóle uruchomić. Próbowałem bloku, inline-block i każdej niejasnej wartości, którą mogłem znaleźć na MDN.

http://jsfiddle.net/wjFbD/2/

---

Nie wiem, dlaczego nie myśleć tylko zawijania przyciski div wcześniej. Oto co mam wymyślić:

http://jsfiddle.net/SkczB/2/

Wiąże się overflow: hiddenbox formatting context trick (które podejrzewa się dzieje, aby wygląd tutaj, ale nie potrafił zobaczyć, gdzie w celu dopasowania go). Najważniejsze informacje:

1. Dwa przyciski są zapakowane w divy za pomocą przycisku klasy "PRZeWIETL".
2. Dyski są sformatowane zgodnie ze sztuczką opisaną w trzecim akapicie powyżej. Prawy div ma wartość float: prawą i stałą szerokość, lewy div nie ma specjalnego stylu.
3. Stosujemy teraz kontekstowy trik kontekstowy. Lewy div ma nadmiar: ukryty, co powoduje, że tworzy on przestrzeń dla prawostronnego diva.
4. Możemy teraz zastosować lewy margines do prawego elementu div i zmienić jego szerokość, a lewy div zawsze będzie mieć odpowiedni rozmiar.
5. Diwki tworzą dla nas pożądany efekt "wypełnienia dostępnej szerokości", teraz musimy po prostu umieścić guziki wewnątrz elementów div i nadać im wysokość i szerokość 100%.
6. Jeśli jest to lewy przycisk, który chciał mieć ustaloną szerokość, w zasadzie powtórz powyższe kroki z lewymi i prawymi zamienionymi miejscami.

Answer 1

To nie może być dokładnie to, czego szukasz tutaj, ale tutaj jest opcja, że ​​wydaje się, że pracował dla mnie z skrzypce.

Jeśli masz ustaloną szerokość div, w której znajdują się elementy, możesz podzielić otrzymaną pozostałą szerokość div po tym, jak przycisk A zostanie wypełniony, powiedzmy, 100 pikseli, a następnie ustawić przycisk 2 na pozostały rozmiar.

Alternatywnie inną opcją byłoby uruchomienie go w procentach 20%/80%, 30%/70%, tego rodzaju rzeczy. Oto skrzypce, które osiągają to, czego szukasz na samym opakowaniu przycisku na dole. Zastosowałem do niego konkretne klasy i dodałem divy wokół każdego przycisku, aby uzyskać nieco większą kontrolę. Elementy div opakowania owijającego są ustawione odpowiednio na 20% i 80%, natomiast przycisk jest ustawiony na wypełnienie 100% przestrzeni zawierającej.

Oto zmodyfikowane skrzypce i zmodyfikowany HTML/CSS. Nadzieję, że to pomaga na co szukasz ...

http://jsfiddle.net/wjFbD/7/

HTML

<div class="btnWrapper"> 
    <div class="buttonWrapperB"> 
    <button class="left"> 
     button Left 
    </button> 
    </div> 
    <div class="buttonWrapperA"> 
    <button class="right"> 
     button Right 
    </button> 
    </div> 
</div>​ 

CSS

.btnWrapper 
{ 
    width: 100%; 
    background-color: #FEE; 
    border: 2px solid black; 
    margin-bottom: 10px; 
    height: 50px; 
} 

.buttonWrapperB{ 
    float: left; 
    width: 20%; 
} 
.buttonWrapperB button{ 
    width: 100%; 
    height: 50px; 
} 

.buttonWrapperA{ 
    float:left; 
    width: 80%;    
} 

.buttonWrapperA button{ 
    width: 100%; 
    height: 50px; 
} 

Answer 2

Poprawiłem nieprzezroczystość tła elementów .right, aby zobaczyć, co się dzieje pod nimi. Wygląda na to, że elementy .left zajmują nie tylko pozostałą przestrzeń, ale także zajmują cały rząd. Co dziwne, tekst wewnątrz tych elementów jest wyśrodkowany tak, jakby zajmował tylko pozostałą przestrzeń.

Jeśli chcesz, żeby to samo działało dla przycisków, wydaje się, że jedyne rozwiązanie wymaga trochę hackowania. Przyciski są dość skomplikowane.

button.left { 
    margin: 0; 
    position: absolute; /*this seems to be the only way to get the button to stay on the same row - floating it left won't even work*/ 
    z-index: -1; /*hides the "overflowing" part below the right button*/ 
    width: 100%; /*make the button stretch to the full width of the row*/ 
    padding-right: 400px; /*add a padding-right hack so that text will be centered correctly - should be same size as fixed width .right element*/ 
    padding-left: 0; 
    display: block; 

} 

Zobacz zaktualizowaną skrzypce: http://jsfiddle.net/wjFbD/6/

Answer 3

zaczynając

Jeden element ma stałą szerokość, a drugi element powinien zająć niezależnie od szerokości.

tu jest moje rozwiązanie ogólne:

<div class="container"> 
    <div class="two">125&thinsp;€</div> 
    <div class="one">my favorite provider</div> 
</div> 

(stylus syntax, in your mind just add {,},;) 

.one // red 
    border none 
    height auto 

    overflow hidden 
    white-space nowrap 
    text-overflow ellipsis 
.two // green 
    float left 
    white-space nowrap 
    text-overflow ellipsis 

Można ustawić jeden zielony rzecz do stałej szerokości, ale w rzeczywistości, nawet nie trzeba! Rzeczy ładnie się ładują. A String zostaje obcięty za pomocą elipsy, jeśli robi się zbyt długo.

Rzeczy stają się nieco bardziej skomplikowane, gdy jeden z nich jest <button>, a nie <div> (i nie mogę wymyślić, która właściwość stylu je rozróżnia, więc musiałbym odejść), ale w każdym razie, z wrapper, który działa również:

→ Zobacz full codepen here. (Opinia doceniona.)