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

请检查一下，您可以手动扩展宽度，并将类设置为特定的Div。

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>

浮动div，最大宽度不起作用

2 个答案: