我的 CSS 替换了按钮外的文本答案

【问题标题】：My CSS replaces the text outside of the button我的 CSS 替换了按钮外的文本
【发布时间】：2018-01-23 18:59:26
【问题描述】：

我正在与纸牌游戏进行简单匹配，我对按钮进行了一些样式设置以使其更具吸引力，但样式代码使其文本位于按钮之外，如果我移动文本，则按钮会随之移动如果有人能告诉我我在这里做错了什么，请这样做。

完整的 HTML 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cardgame</title>
</head>
<body>

<h1 id="result">2</h1>

<form class="cards">
    <div id="cards1"></div>
    <input id="cards1[1]" value="1" name="card1" type="radio">
    <label for="cards1[1]">1</label>
    <input id="cards1[2]" value="2" name="card1" type="radio">
    <label for="cards1[2]">2</label>
    <input id="cards1[3]" value="3" name="card1" type="radio">
    <label for="cards1[3]">3</label>
    </div>
    <div id="cards2">
        <input id="cards2[1]" value="1" name="card2" type="radio"><label for="cards2[1]"> </label>
        <input id="cards2[2]" value="2" name="card2" type="radio"><label for="cards2[2]"> </label>
        <input id="cards2[3]" value="3" name="card2" type="radio"><label for="cards2[3]"> </label>
    </div>
    <input type="submit">
</form>



<script src="script.js" charset="utf-8"></script>
</body>

</html>

完整的 CSS 代码

    .credit {
    background: lightyellow;
}

body {background-color: floralwhite}


label {
    position: relative;
    left: -15px;
    top: -3px;
    font-size: 8pt;
    opacity: .5;
}


input[type="radio"] {
    display: none;
}

input[type="radio"] + label:before {
    background-color: white;
    border: 2px solid #ccc;
    border-radius: 6px;
    content: "";
    display: inline-block;
    font-size: 12px;
    height: 80px;
    width: 50px;
    line-height: 16px;
    margin: 6px 6px 0 0;
    vertical-align: middle;
}
/*
input[type="radio"]:checked + label:before {
    border: 2px solid red;
}
*/

【问题讨论】：

标签： html css button text

【解决方案1】：

将您的文本放在一个跨度内，然后尝试移动它。示例：

<div id="cards1">
 <input id="cards1[1]" value="1" name="card1" type="radio">
 <label for="cards1[1]"><span class="text">1</span></label>
 <input id="cards1[2]" value="2" name="card1" type="radio">
 <label for="cards1[2]"><span class="text">2</span></label>
 <input id="cards1[3]" value="3" name="card1" type="radio">
 <label for="cards1[3]"><span class="text">3</span></label>
</div>

CSS：

.text {
  display: inline;
  font-size: 8pt;
  opacity: .5;
  position:relative;
  left:-35px;
}

【讨论】：

这修复了我的代码，非常感谢。我还了解了标签，所以这是一个奖励

【解决方案2】：

要解决这个问题，您应该将输入的类型更改为按钮，然后将 css 更改为使用按钮，并在按钮周围加上卡片的 div，我已经解决了问题

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cardgame</title>
</head>
<body>

<h1 id="result">2</h1>

<form class="cards">
    <div id="cards1">
        <div class="card">
            <input id="cards1[1]" value="1" name="card1" type="button">
        </div>
        <div class="card">
            <input id="cards1[2]" value="2" name="card1" type="button">
        </div>
        <div class="card">
            <input id="cards1[3]" value="3" name="card1" type="button">           
        </div>
    </div>
    <div id="cards2">
        <input id="cards2[1]" value="1" name="card2" type="button"><label for="cards2[1]"> </label>
        <input id="cards2[2]" value="2" name="card2" type="button"><label for="cards2[2]"> </label>
        <input id="cards2[3]" value="3" name="card2" type="button"><label for="cards2[3]"> </label>
    </div>
    <input type="submit">
</form>



<script src="script.js" charset="utf-8"></script>
</body>

</html>

CSS 是：

.credit {
    background: lightyellow;
}

body {background-color: floralwhite}

label {
    position: relative;
    left: -15px;
    top: -3px;
    font-size: 8pt;
    opacity: .5;
    text-align: center
}


input[type="radio"] {
    display: none;
}

input[type="button"] {
    background-color: white;
    border: 2px solid #ccc;
    border-radius: 6px;
    content: "";
    display: inline-block;
    font-size: 12px;
    height: 80px;
    width: 50px;
    line-height: 16px;
    margin: 6px 6px 0 0;
    vertical-align: middle;
}

.card {
    position: relative;
    display: inline;
}

【讨论】：