Question

好的，我正在做一个调查的freecodecamp项目。那个

他们希望您的调查像这样

https://codepen.io/freeCodeCamp/pen/VPaoNP。我目前正在寻找

我的CSS

#title {
  text-align:center;
}
#description {
  text-align:center
}

#survey-form {
  text-align:center;
}
.leftsidequestions {
  display:inline-block
  margin:auto;
  text-align:right;
}
#number {
  width:9%;
}

我现在的问题是我想要

我的单选按钮像在代码笔中一样排列。也不会是

如果我能弄清楚如何将我的其他问题（如他们的问题）排成一列，那就不好了。他们

在文本的左侧，然后在按钮/框的右侧带有

分开在中间，但我不知道该怎么做。

到目前为止，我已经尝试过垂直对齐它们并显示遮挡和

内联阻止它们。

Answer 1

这样做，您的输入将在以下示例的一栏中进行检查。

body

#title {
  text-align:center;
}
#description {
  text-align:center
}

#survey-form {
  text-align:center;
}
.leftsidequestions {
  display:inline-block
  margin:auto;
  text-align:right;
}
#number {
  width:9%;
}

.inputs {
  display: flex;
  flex-direction: column;
  width: 200px;
  margin: auto; 
}

首先添加一个类名为“ inputs”的div并将您的输入包装在其中。并添加此CSS类

<table>
        <tbody>
            <tr ng-repeat="registration in Registrations | orderBy:'title'" class="tableRow ng-scope">
                <td style="padding-left: 20px;" ng-if="reg.title != 'Jabc'" class="ng-binding ng-scope">test</td>
            <td style="padding-left: 20px;">
                <button ng-click="enter(registration)" class="ng-binding">Enter community</button>
            </td>


            <tr ng-repeat="registration in Registrations | orderBy:'title'" class="tableRow ng-scope">
                <td style="padding-left: 20px;" ng-if="reg.title != 'Jabc'" class="ng-binding ng-scope">test1</td>
            <td style="padding-left: 20px;">
                <button ng-click="enter(registration)" class="ng-binding">Enter community</button>
            </td>



            <tr ng-repeat="registration in Registrations | orderBy:'title'" class="tableRow ng-scope">
                <td style="padding-left: 20px;" ng-if="reg.title != 'Jabc'" class="ng-binding ng-scope">test2</td>
            <td style="padding-left: 20px;">
                <button ng-click="enter(registration)" class="ng-binding">Enter community</button>
            </td>
    </tbody>
</table>

，然后在您的代码中看到它。

Answer 2

按照他们的示例，对于每一行行，他们将内容分别设置在inline-block的div元素中左右。像这样：

.left,
.right {
  display: inline-block;
  width: 45%;
}

.left {
  text-align: right;
}

.right {
  text-align: left;
}

input {
  margin: 5px;
}

<div class="left">
  <label id="name-label" for="name">Name:</label>
 </div>
 <div class="right">
   <input type="name" id="name" required placeholder="Name" />
</div>

<div class="left">
  <label id="email-label" for="email">Email:</label>
</div>
<div class="right">
  <input type="email" id="email" required placeholder="Email" />
</div>

试图让我的单选按钮排成一行

2 个答案: