フローティングdivの最大幅が機能しない

Question

私に許してください、これは確かによくある質問ですが、確かに簡単な解決策です。私はラジオグループを「素敵なボタン」に変えようとしていますが、95％が正しく機能していますが、「ボタン」には最小と最大の幅とサイズが必要です。下のフィドルでは、最初の "ボタン"の幅を長めのコンテンツに合わせて拡大しようとしています。何かご意見は？

ありがとうございます！

フィドル：[https://jsfiddle.net/charlesread/0bpvrcpj/6/][1]

main { 
 
    width: 800px; 
 
    margin:auto; 
 
} 
 

 
div#radioContainer { 
 
    text-align:center; 
 
    margin: 10px; 
 
} 
 

 
div#radioContainer label { 
 
    display:inline-block; 
 
} 
 
div#radioContainer label input[type=radio] { 
 
    visibility: hidden; 
 
    position: absolute; 
 
} 
 

 
div#radioContainer label input[type=radio] + div { 
 
    width:100px; 
 
    max-width:200px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background-color: #ddd; 
 
    float: left; 
 
    position:relative; 
 
    transition: background-color 0.5s; 
 
} 
 

 
div#radioContainer label input[type=radio] + div p { 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
div#radioContainer label input[type=radio]:checked + div { 
 
    background-color: #bbb; 
 
}

<main> 
 
<div id="radioContainer"> 
 
<label><input type="radio" name="a"><div><p>One twothreefourfivesixseven</p></div></label> 
 
<label><input type="radio" name="a"><div><p>One</p></div></label> 
 
<label><input type="radio" name="a"><div><p>One</p></div></label> 
 
</div>

Answer 1

<p></p>タグを使用しないでください。代わりに、別のdivをテキストに使用します。以下のスニペットのcssを確認してください。努力のため

main { 
 
    width: 800px; 
 
    margin: auto; 
 
} 
 

 
div#radioContainer { 
 
    text-align: center; 
 
    margin: 10px; 
 
} 
 

 
div#radioContainer label { 
 
    display: inline-block; 
 
} 
 

 
div#radioContainer label input[type=radio] { 
 
    visibility: hidden; 
 
    position: absolute; 
 
} 
 

 
div#radioContainer label input[type=radio]+div { 
 
    min-width: 100px; 
 
    max-width: 200px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background-color: #ddd; 
 
    float: left; 
 
    position: relative; 
 
    transition: background-color 0.5s; 
 
} 
 

 
div#radioContainer label input[type=radio]:checked+div { 
 
    background-color: #bbb; 
 
} 
 

 
.inner { 
 
    top: 50%; 
 
    position: relative; 
 
    transform: translateY(-50%); 
 
}

<main> 
 
    <div id="radioContainer"> 
 
    <label><input type="radio" name="a"><div><div class="inner">This is a very long text</div></div></label> 
 
    <label><input type="radio" name="a"><div><div class="inner">Thisisanotherlongtext...............</div></div></label> 
 
    <label><input type="radio" name="a"><div class="outer"><div class="inner">One</div></div></label> 
 
    </div> 
 
</main>

Answer 2

手動で特定の事業部にセットされた幅クラスを拡張することができ 、これを確認してください。

main { 
 
    width: 800px; 
 
    margin:auto; 
 
} 
 

 
div#radioContainer { 
 
    text-align:center; 
 
    margin: 10px; 
 
} 
 

 
div#radioContainer label { 
 
    display:inline-block; 
 
} 
 
div#radioContainer label input[type=radio] { 
 
    visibility: hidden; 
 
    position: absolute; 
 
} 
 

 
div#radioContainer label input[type=radio] + div { 
 
    width:100px; 
 
    max-width:200px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background-color: #ddd; 
 
    float: left; 
 
    position:relative; 
 
    transition: background-color 0.5s; 
 
} 
 

 
div#radioContainer label input[type=radio] + div p { 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
div#radioContainer label input[type=radio]:checked + div { 
 
    background-color: #bbb; 
 
} 
 

 
#radioContainer .expand{ 
 
width: 250px!important; 
 
}

<main> 
 
<div id="radioContainer"> 
 
<label><input type="radio" name="a" ><div class="expand"><p>One twothreefourfivesixseven</p></div></label> 
 
<label><input type="radio" name="a"><div><p>One</p></div></label> 
 
<label><input type="radio" name="a"><div><p>One</p></div></label> 
 
</div>