html - 如何让我的选项出现在我的问题的最右边？
问题描述
到目前为止，我已经确定要将我的选项（带颜色的矩形）保持在最右边，如果不是更多的话，我必须让我的文本填满一整行。
在我的表格中，不同的主题问题被分成表格，如下面的代码所示。对于某些表格，选项位于最右侧，因为问题占据了整行，但对于其他表格，问题太短，因此选项无法到达最右侧。
为了解决这个问题，我尝试添加填充空白，甚至是可见性不可见的文本，但每次，为了使选项位于最右边（如我所愿），文本必须进入下一行。
td:first-child {
width:85%;
}
input[type=radio]{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.yesImage, .noImage {
background-color:navajowhite;
}
input[type=radio]:checked + .yesImage {
background-color:black;
}
input[type=radio]:checked + .noImage {
background-color:black;
}
.optionImage {
cursor:pointer;
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
height:35px;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
}
.yesImage, .noImage {
width:50px;
}<!DOCTYPE html>
<html>
<head>
<title> Test </title>
</head>
<body>
<form>
<fieldset>
<table>
<tr>
<td>
<p class="questions" id="question1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<td>
<input type="radio" name="question1" id="yes1" value="yes"><label class="yesImage optionImage" for="yes1">
</label>
<input type="radio" name="question1" id="no1" value="no"><label class="noImage optionImage" for="no1">
</label>
</td>
</tr>
<tr>
<td>
<p class="questions" id="question2"> Lorem ipsum. (Question 2) </p>
</td>
<td>
<input type="radio" name="question2" id="yes2" value="yes"><label class="yesImage optionImage" for="yes2">
</label>
<input type="radio" name="question2" id="no2" value="no"><label class="noImage optionImage" for="no2">
</label>
</td>
</tr>
</table>
<table>
<tr>
<td>
<p class="questions" id="question3"> Lorem ipsum. (Question 3) </p>
</td>
<td>
<input type="radio" name="question3" id="yes3" value="yes"><label class="yesImage optionImage" for="yes3">
</label>
<input type="radio" name="question3" id="no3" value="no"><label class="noImage optionImage" for="no3">
</label>
</td>
</tr>
<tr>
<td>
<p class="questions" id="question4"> Lorem ipsum. (Question 4) </p>
</td>
<td>
<input type="radio" name="question4" id="yes4" value="yes"><label class="yesImage optionImage" for="yes4">
</label>
<input type="radio" name="question4" id="no4" value="no"><label class="noImage optionImage" for="no4">
</label>
</td>
</tr>
</table>
<table>
<tr>
<td>
<p class="questions" id="question5"> Lorem ipsum. (Question 5)<span id="whitespace"> filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text</span> </p>
</td>
<td>
<input type="radio" name="question5" id="yes5" value="yes" class="skippedQuestions"><label class="yesImage optionImage" for="yes5">
</label>
<input type="radio" name="question5" id="no5" value="no" class="skippedQuestions"><label class="noImage optionImage" for="no5">
</label>
</td>
</tr>
<tr>
<td>
<p class="questions" id="question4"> Lorem ipsum. (Question 6) </p>
</td>
<td>
<input type="radio" name="question6" id="yes6" value="yes" class="skippedQuestions"><label class="yesImage optionImage" for="yes6">
</label>
<input type="radio" name="question6" id="no6" value="no" class="skippedQuestions"><label class="noImage optionImage" for="no6">
</label>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>[请记住，这是我的问题的一个例子。]
使用代码段时请转至整页，以便更容易看到我的问题。
这就是我想要的（问题之间没有多余的线条）：
解决方案
这是您的问题的解决方案。我在解决方案的 css 中添加了一些属性，并用注释标记了这些属性。希望它会帮助你。
table { /*Add this block in your css*/
width: 100%; /*Newly Added*/
}
td:first-child {
width:85%;
}
td:nth-child(2) { /*Newly Added*/
width:15%; /*Newly Added*/
}
input[type=radio]{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
display: none; /*Newly Added*/
}
.yesImage, .noImage {
width: 30% !important; /*Newly Added*/
margin-right: 5%; /*Newly Added*/
background-color:navajowhite;
}
input[type=radio]:checked + .yesImage {
background-color:black;
}
input[type=radio]:checked + .noImage {
background-color:black;
}
.optionImage {
cursor:pointer;
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
height:35px;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
}
.yesImage, .noImage {
width:50px;
}<!DOCTYPE html>
<html>
<head>
<title> Test </title>
</head>
<body>
<form>
<fieldset>
<table>
<tr>
<td>
<p class="questions" id="question1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<td>
<input type="radio" name="question1" id="yes1" value="yes"><label class="yesImage optionImage" for="yes1">
</label>
<input type="radio" name="question1" id="no1" value="no"><label class="noImage optionImage" for="no1">
</label>
</td>
</tr>
<tr>
<td>
<p class="questions" id="question2"> Lorem ipsum. (Question 2) </p>
</td>
<td>
<input type="radio" name="question2" id="yes2" value="yes"><label class="yesImage optionImage" for="yes2">
</label>
<input type="radio" name="question2" id="no2" value="no"><label class="noImage optionImage" for="no2">
</label>
</td>
</tr>
</table>
<table>
<tr>
<td>
<p class="questions" id="question3"> Lorem ipsum. (Question 3) </p>
</td>
<td>
<input type="radio" name="question3" id="yes3" value="yes"><label class="yesImage optionImage" for="yes3">
</label>
<input type="radio" name="question3" id="no3" value="no"><label class="noImage optionImage" for="no3">
</label>
</td>
</tr>
<tr>
<td>
<p class="questions" id="question4"> Lorem ipsum. (Question 4) </p>
</td>
<td>
<input type="radio" name="question4" id="yes4" value="yes"><label class="yesImage optionImage" for="yes4">
</label>
<input type="radio" name="question4" id="no4" value="no"><label class="noImage optionImage" for="no4">
</label>
</td>
</tr>
</table>
<table>
<tr>
<td>
<p class="questions" id="question5"> Lorem ipsum. (Question 5)<span id="whitespace"> filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text</span> </p>
</td>
<td>
<input type="radio" name="question5" id="yes5" value="yes" class="skippedQuestions"><label class="yesImage optionImage" for="yes5">
</label>
<input type="radio" name="question5" id="no5" value="no" class="skippedQuestions"><label class="noImage optionImage" for="no5">
</label>
</td>
</tr>
<tr>
<td>
<p class="questions" id="question4"> Lorem ipsum. (Question 6) </p>
</td>
<td>
<input type="radio" name="question6" id="yes6" value="yes" class="skippedQuestions"><label class="yesImage optionImage" for="yes6">
</label>
<input type="radio" name="question6" id="no6" value="no" class="skippedQuestions"><label class="noImage optionImage" for="no6">
</label>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>推荐阅读
- html - 如何修复引导部分在 sm 屏幕上一起运行？
- sql-server - 有没有更好的方法在 SQL Server 的名称字段中查找不正确的大写/小写单词？
- javascript - 将一个数组拆分为 2 个按对象属性分组的数组
- tensorflow - od_graph_def = tf.GraphDef() AttributeError: 模块 'tensorflow' 没有属性 'GraphDef'
- docker - 安装过程中权限被拒绝错误 使用 docker “生成服务器配置文件”的第 1 步
- android - Mockito.doNothing 不适用于 Handler
- vb.net - 尝试将 excel 文件加载到 .net (web) 中的数据表时请求 Veracode CWE 89 帮助
- javascript - 如何将单选按钮的值保存到本地存储？如何恢复它？
- amazon-s3 - 使用 localstack 从 s3 调用 lambda 的问题
- arrays - 从 Numpy 数组中删除值