Question

我试图做一个自定义单选按钮，我在互联网上找到了一些代码，并对其进行了自定义。问题是，我需要在标签中向左/向右填充20px，并且我需要将最小宽度保持在110px，并且li宽度没有包装内容...

如果你想看他就是我的代码。

.ui-radio {
    margin:25px 0 0 0;
    padding:0;
}

.ui-radio li {
    float:left;
    margin:0 20px 0 0;
    min-width:110px;
    height:40px;
    position:relative;
    list-style-type: none;
}

.ui-radio label, .ui-radio input {
   display:block;
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
}

.ui-radio input[type="radio"] {
   opacity:0;
   z-index:100;
}

.ui-radio input[type="radio"]:checked + label {
   border-bottom: solid 4px BLUE;
}

.ui-radio label {
    padding:5px;
    cursor:pointer;
    z-index:90;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
    padding:0 20px;
    line-height:30px;
    border-radius:2px;
}

.ui-radio label:hover {
    background:#DDD;
}

<ul class="ui-radio">
        <li>
            <input type="radio" id="choice1" name="personnel" />
            <label for="choice1">Long_choice_1</label>
        </li>
        <li>
            <input type="radio" id="choice2" name="personnel" />
            <label for="choice2">choice_2</label>
        </li>
</ul>

Answer 1

从position: absolute;中删除.ui-radio label, .ui-radio input。

绝对定位使项目的父项不知道内容大小，也不清楚内容为何溢出。

Answer 2

标签的默认显示为“内联”。首先，您应该将他的显示更改为“ inline-block”，“ block”或...

例如：

html：

<!DOCTYPE html>
<html>

<head>
  <link class="menu-bar" rel="stylesheet" href="../css/index.css">
  <link class="container" rel="stylesheet" href="../css/menu.css">
  <meta charset="utf-8">
  <title>Cipher Program</title>
</head>

<body>
  <ul class="ui-radio">
    <li>
      <input type="radio" id="choice1" name="personnel" />
      <label for="choice1">Long_choice_1</label>
    </li>
    <li>
      <input type="radio" id="choice2" name="personnel" />
      <label for="choice2">choice_2</label>
    </li>
  </ul>
</body>

</html>

css：

body {
  overflow: hidden;
  background: #8e2de2;
  background: -webkit-linear-gradient(to right, #4a00e0, #8e2de2);
  background: linear-gradient(to right, #4a00e0, #8e2de2);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
body .ui-radio {
  display: inline-flex;
  flex-direction: column;
}
body .ui-radio li {
  margin-bottom: 10px;
  border-radius: 5px;
  background: #fff;
  list-style: none;
}
body .ui-radio li input[type="radio"] {
  position: absolute;
  visibility: hidden;
}
body .ui-radio li input[type="radio"]:checked ~ label::before {
  background: #990099;
}
body .ui-radio li label {
  cursor: pointer;
  min-width: 110px;
  display: flex;
  align-items: center;
  padding: 10px;
}
body .ui-radio li label::before {
  transition: background ease 0.2s;
  content: "";
  border-radius: 50%;
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 10px;
  border: 3px solid #777;
  box-sizing: border-box;
}

自定义单选按钮填充

2 个答案: