如何使按钮居中并使它们的尺寸相同

时间：2016-09-29 11:21:02

标签： html css

我是CSS的新手，并试图制作一个页面。我有2个单选按钮，但我试图使它们看起来像使用CSS的常规按钮。 它们看起来非常相似，但我无法将它们居中，它们的大小不同。我该如何解决这个问题。

* {
    box-sizing: border-box;
    background-color: #bf2e1a;
}
header {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 100px;
    margin-left: 650px;
    margin-right: 650px;
    margin-top: 150px;
    text-align: center;
    font-size: 60px;
    border-width: 5px;
}
div#get-justice {
    position: relative;
    top: 30px;
    padding-top: 10px;
    background-color: #EFDFBC;
    margin: 0 auto;
    width: 600px;
    height: 600px;
}
div#get-justice p {
    background-color: #EFDFBC;
    color: red;
    padding: 40px 40px 4px 40px;
    font-size: 28px;
}
div#get-justice button {
    background-color: red;
    border: none;
    color: white;
    margin-top: 120px;
    padding: 20px 37px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 21px;
    cursor: pointer;
}
h3 {
    background: #EFDFBC;
    padding-top: 45px;
    text-align: center;
    color: red;
    font-size: 23px;
}
/*div#first-question {
        margin: 0px auto;
        width: 650px;
        height: 460px;
        background: #EFDFBC;
    }*/

ul {
    columns: 2;
    background: #EFDFBC;
}
li {
    text-align: -webkit-match-parent;
    background: #EFDFBC;
    display: block;
    padding: 1px 0px 3px 37px;
}
input#quiz-question-one-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-one-no {
    display: none;
    margin: 11px;
}
label#oneYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#oneNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-two-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-two-no {
    display: none;
    margin: 11px;
}
label#twoYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#twoNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-three-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-three-no {
    display: none;
    margin: 11px;
}
label#threeYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#threeNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-four-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-four-no {
    display: none;
    margin: 11px;
}
label#fourYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fourNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-five-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-five-no {
    display: none;
    margin: 11px;
}
label#fiveYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fiveNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
.hidden {
    display: none;
}
.visible {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 369px;
    background: #EFDFBC;
}
.questions {
    margin: 0px auto;
    width: 650px;
    height: 654px;
    background: #EFDFBC;
}
.questions-header {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 100px;
    padding-bottom: 30px;
    padding-top: 30px;
    margin-top: 150px;
    text-align: center;
    font-size: 60px;
    border-width: 5px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8"/>
    <title>Questions</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class = "quiz-questions">
      <div id="first-question" class="visible questions">
        <h1 class = "questions-header"> Question 1 </h1>
        <h3>Do you see number 1 to 5</h3>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
        <hr>
        <input type="radio" id="quiz-question-one-yes" value="yes" />
        <label for="quiz-question-one-yes" id="oneYes">Yes</label>
        <input type="radio" id="quiz-question-one-no" value="no" />
        <label for="quiz-question-one-no" id="oneNo">No</label>
      </div>
    </div>
  </body>
</html>

3 个答案:

答案 0 :(得分：1)

我会将标签和输入包装在一个单独的div中。所以它会是这样的：

input#quiz-question-one-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-one-no {
    display: none;
    margin: 11px;
}
label#oneYes, label#oneNo {
    background-color: red;
    text-align: center;
    padding: 10px;
    width: 80px;
    display: block;
}

.button
{
  display: inline-block;
}
    <div class = "quiz-questions">
      <div id="first-question" class="visible questions">
        <div class="button">
        <input type="radio" id="quiz-question-one-yes" value="yes" />
        <label for="quiz-question-one-yes" id="oneYes">Yes</label>
        </div>
        <div class="button">
        <input type="radio" id="quiz-question-one-no" value="no" />
        <label for="quiz-question-one-no" id="oneNo">No</label>
        </div>
      </div>
    </div>

这也会删除所有笨拙的填充和边距。

答案 1 :(得分：1)

＆＃13;
＆＃13; 
* {
    box-sizing: border-box;
    background-color: #bf2e1a;
}
header {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 100px;
    margin-left: 650px;
    margin-right: 650px;
    margin-top: 150px;
    text-align: center;
    font-size: 60px;
    border-width: 5px;
}
div#get-justice {
    position: relative;
    top: 30px;
    padding-top: 10px;
    background-color: #EFDFBC;
    margin: 0 auto;
    width: 600px;
    height: 600px;
}
div#get-justice p {
    background-color: #EFDFBC;
    color: red;
    padding: 40px 40px 4px 40px;
    font-size: 28px;
}
div#get-justice button {
    background-color: red;
    border: none;
    color: white;
    margin-top: 120px;
    padding: 20px 37px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 21px;
    cursor: pointer;
}
h3 {
    background: #EFDFBC;
    padding-top: 45px;
    text-align: center;
    color: red;
    font-size: 23px;
}
div#first-question {
   text-align: center;
}

ul {
    columns: 2;
    background: #EFDFBC;
}
li {
    text-align: -webkit-match-parent;
    background: #EFDFBC;
    display: block;
    padding: 1px 0px 3px 37px;
}
input#quiz-question-one-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-one-no {
    display: none;
    margin: 11px;
}
label#oneYes {
    display: inline-block;
    margin: 10px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#oneNo {
    display: inline-block;
    margin: 10px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-two-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-two-no {
    display: none;
    margin: 11px;
}
label#twoYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#twoNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-three-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-three-no {
    display: none;
    margin: 11px;
}
label#threeYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#threeNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-four-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-four-no {
    display: none;
    margin: 11px;
}
label#fourYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fourNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-five-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-five-no {
    display: none;
    margin: 11px;
}
label#fiveYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fiveNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
.hidden {
    display: none;
}
.visible {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 369px;
    background: #EFDFBC;
}
.questions {
    margin: 0px auto;
    width: 650px;
    height: 654px;
    background: #EFDFBC;
}
.questions-header {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 100px;
    padding-bottom: 30px;
    padding-top: 30px;
    margin-top: 150px;
    text-align: center;
    font-size: 60px;
    border-width: 5px;
}
＆＃13; 
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8"/>
    <title>Questions</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class = "quiz-questions">
      <div id="first-question" class="visible questions">
        <h1 class = "questions-header"> Question 1 </h1>
        <h3>Do you see number 1 to 5</h3>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
        <hr>
        <input type="radio" id="quiz-question-one-yes" value="yes" />
        <label for="quiz-question-one-yes" id="oneYes">Yes</label>
        <input type="radio" id="quiz-question-one-no" value="no" />
        <label for="quiz-question-one-no" id="oneNo">No</label>
      </div>
    </div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：-1)

中心有几个选项：

  • 最简单的事情之一：您可以使用html中心标记：

    <center> <input type="radio" id="quiz-question-one-no" value="no" /> </center>

  • 你可以使用：

    .input{
margin-left:50%;
margin-right:50%
}

    可能有更多选项，但这是最简单的选择。

对于相同的尺寸，您需要通过2个按钮设置最小宽度，最小高度。然后按钮将具有相同的最小尺寸。对于正确和否的文本，我认为它将起作用。

相关问题
最新问题