Question

我正在尝试在Microsoft Word中实现以下布局：

其中左侧元素是单选按钮组，蓝色元素是按钮。

在HTML中，我可以获得以下内容：

但是，“ ENROL”按钮有问题，因为我想不出一种方法来使它出现在单选按钮组旁边，如上面的可视化效果所示。希望对此有所帮助。

.enrol_class {
    border: 1px solid black;
}

.enrol_class ul {
    list-style: none;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>testform</title>
    <link rel = "stylesheet" href = "test2.css">
</head>

<body>
    <div class = "enrol_class">
        <ul>
            <li>
                <input type = "radio" id = "rad_1" name = "classes" class = "radio_btn">
                <label for="rad_1">Class 1</label>
            </li>
            
            <li>
                <input type = "radio" id = "rad_2" name = "classes" class = "radio_btn">
                <label for="rad_2">Class 2</label>
            </li>

            <li>
                <input type = "radio" id = "rad_3" name = "classes" class = "radio_btn">
                <label for="rad_3">Class 3</label>
            </li>
        </ul>
        <button type = "button" id = "enrol_btn">ENROL</button>
    </div>
</body>

Answer 1

您可以使用flexbox解决该问题。只需将您的父组件设置为flex-container。

.enrol_class {
    border: 1px solid black;
    display: flex;
    align-items: center;
}

您可以阅读有关flexbox的更多信息： https://www.w3schools.com/css/css3_flexbox.asp

Answer 2

要以Fillipe的答案为基础，下面是一个示例：

.enrol_class {
    border: 1px solid black;
    display: flex;
    align-items: center;
}

.enrol_class ul {
    list-style: none;
}


#enrol_btn {
  padding: 10px;
  margin-left: 50px;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>testform</title>
    <link rel = "stylesheet" href = "test2.css">
</head>

<body>
    <div class = "enrol_class">
        <ul>
            <li>
                <input type = "radio" id = "rad_1" name = "classes" class = "radio_btn">
                <label for="rad_1">Class 1</label>
            </li>
            
            <li>
                <input type = "radio" id = "rad_2" name = "classes" class = "radio_btn">
                <label for="rad_2">Class 2</label>
            </li>

            <li>
                <input type = "radio" id = "rad_3" name = "classes" class = "radio_btn">
                <label for="rad_3">Class 3</label>
            </li>
        </ul>
        <button type = "button" id = "enrol_btn">ENROL</button>
    </div>
</body>

Answer 3

我建议您研究一下flex。您可以随时添加样式，但可以在flex上进行位置检查。另一个选择是CSS网格。

Barbara Villiers

Answer 4

我想这就是您要寻找的

CSS

.enrol_class {  
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.enrol_class input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
}

HTML

<div class="enrol_class">
    <ul>
        <li>
            <input type="radio" id="rad_1" name="classes" class="radio_btn">
            <label for="rad_1">Class 1</label>
        </li>

        <li>
            <input type="radio" id="rad_2" name="classes" class="radio_btn">
            <label for="rad_2">Class 2</label>
        </li>

        <li>
            <input type="radio" id="rad_3" name="classes" class="radio_btn">
            <label for="rad_3">Class 3</label>
        </li>
    </ul>
    <button type="button" id="enrol_btn">ENROL</button>
</div>

Answer 5

[

.enrol_class {
    max-width: 100%;
    width: 800px;
    margin: 100px auto;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.enrol_class ul {
    list-style: none;
}
.enrol_class button{
color: white;
text-transform: uppercase;
padding: 16px 40px;
border: 1px solid black;
background-color: #4472C4;
cursor: pointer;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>testform</title>
    <link rel = "stylesheet" href = "test2.css">
</head>

<body>
    <div class = "enrol_class">
        <ul>
            <li>
                <input type = "radio" id = "rad_1" name = "classes" class = "radio_btn">
                <label for="rad_1">Class 1</label>
            </li>
            
            <li>
                <input type = "radio" id = "rad_2" name = "classes" class = "radio_btn">
                <label for="rad_2">Class 2</label>
            </li>

            <li>
                <input type = "radio" id = "rad_3" name = "classes" class = "radio_btn">
                <label for="rad_3">Class 3</label>
            </li>
        </ul>
        <button type = "button" id = "enrol_btn">ENROL</button>
    </div>
</body>

] 1您将可以通过CSS实现它

将按钮放在单选按钮组旁边

5 个答案: