Question

我一直在尝试对齐单选按钮和复选框。复选框对齐，但单选按钮不对齐。我尝试使用几种不同的CSS模板作为按钮，而我在这里使用的模板来自：http://www.tipue.com/blog/radio-checkbox/。问题出在哪里？

/* General buttons */

input[type="checkbox"],
input[type="radio"] {
  width: 1em;
  z-index: -1;
  vertical-align: middle;
  margin: 0 auto;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  font-weight: 200;
  padding-left: 2.4em;
  padding-right: 0.75em;
  position: relative;
}

input[type="checkbox"]+label:before,
input[type="radio"]+label:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}

input[type="checkbox"]+label:before,
input[type="radio"]+label:before {
  border-radius: 4px;
  border: solid 1px;
  content: '';
  display: inline-block;
  height: 1.65em;
  left: 0;
  line-height: 1.58125em;
  position: absolute;
  text-align: center;
  top: 0;
  width: 1.65em;
}

input[type="checkbox"]:checked+label:before,
input[type="radio"]:checked+label:before {
  content: '\f00c';
}

input[type="checkbox"]+label:before {
  border-radius: 4px;
}

input[type="radio"]+label:before {
  border-radius: 100%;
}


/* radio buttons */

.form-radio {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  position: relative;
  background-color: #f1f1f1;
  color: #666;
  top: 10px;
  height: 30px;
  width: 30px;
  border: 0;
  border-radius: 50px;
  cursor: pointer;
  margin-right: 7px;
  outline: none;
}

.form-radio:checked::before {
  position: absolute;
  font: 13px/1 'Open Sans', sans-serif;
  left: 11px;
  top: 7px;
  content: '\02143';
  transform: rotate(40deg);
}

.form-radio:hover {
  background-color: #f7f7f7;
}

.form-radio:checked {
  background-color: #f1f1f1;
}

label {
  font: 300 16px/1.7 'Open Sans', sans-serif;
  color: #666;
  cursor: pointer;
}


/* check boxes */

.form-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  position: relative;
  background-color: #f1f1f1;
  color: #666;
  top: 10px;
  height: 30px;
  width: 30px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  margin-right: 7px;
  outline: none;
}

.form-checkbox:checked::before {
  position: absolute;
  font: 13px/1 'Open Sans', sans-serif;
  left: 11px;
  top: 7px;
  content: '\02143';
  transform: rotate(40deg);
}

.form-checkbox:hover {
  background-color: #f7f7f7;
}

.form-checkbox:checked {
  background-color: #f1f1f1;
}

label {
  font: 300 16px/1.7 'Open Sans', sans-serif;
  color: #666;
  cursor: pointer;
}

<!DOCTYPE HTML>
<html>

<head>
  <title>Author Script by SANDERS</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="static/main.css?version=1" />
</head>

<body>
  {% include 'includes/_navbar.html' %}
  <!-- Header -->
  <header id="header" class="alt">
    <div class="inner">
      <h3>Sanders Author Script</h3>
      <p>A free author formatting script by Stephan J. Sanders</p>
    </div>
  </header>
  <!-- Wrapper -->
  <div id="wrapper">
    <!-- Banner -->
    <section id="intro" class="main">
      <span class="icon fa-diamond major"></span>
      <h3>Download the template file below and re-upload with your authors list</h3>
      <a href="static/ExampleAuthorList.txt" download="Authors_Template.txt"><button type="button">Download</button></a><br><br>
      <input type="checkbox" class="form-checkbox" id="sep-period"><label for="sep-period">Separate initials with period</label><br>
      <input type="checkbox" class="form-checkbox" id="sep-space"><label for="sep-space">Separate initials with space</label><br>
      <input type="radio" name="affiliation" value="Mark affiliations with number" id="number" class="form-radio" checked><label for="number">Mark affiliations with number</label><br>
      <input type="radio" name="affiliation" value="Mark affiliations with letter" id="letter" class="form-radio"><label for="letter">Mark affiliations with letter</label>
    </section>
  </div>
  <!-- Scripts -->
  <script src="js/jquery.min.js"></script>
  <script src="js/skel.min.js"></script>
  <script src="js/util.js"></script>
  <script src="js/main.js"></script>
</body>

</html>

对齐单选按钮和复选框时遇到问题

0 个答案: