Question

到目前为止，我已经确定要使选项（带有颜色的矩形）保持在最右边，如果没有更多内容，我必须使我的文本填满整行。

在我的表单中，不同的主题问题被分成表格，如下面的代码所示。对于某些表，由于问题占据了整行，所以选项位于最右边，但是对于其他表，问题太短，因此选项无法到达最右边。

为解决此问题，我尝试使用可见空格或什至看不到可见性的文本，但是每次，为了使选项位于最右边（如我所愿），文本必须转到下一行。

<!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>

    <div class="container">
      <form action="">
        <table id="mytable1">
            <tr>
                <td>
                    <select>
                        <option>Option 1</option>
                        <option>Option 2</option>
                        <option>Option 3</option>
                        <option>Option 4</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">Name</label>
                    <input type="text" class="name">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">City</label>
                    <input type="text" class="city">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">Phone</label>
                    <input type="text" class="phone">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">State</label>
                    <input type="text" class="state">
                </td>
            </tr>            
            <tr>
                <td>
                    <label for="">zip</label>
                    <input type="text" class="pos">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">SSN:</label>
                    <input type="text" class="add1">                
                </td>
            </tr>
            <tr>
              <td>
                  <label for="">DOB:</label>
                  <input type="text" class="add1">                
              </td>
          </tr>
          <tr>
            <td>
                <label for="">other:</label>
                <input type="text" class="add1">                
            </td>
        </tr>
        </table>
      </form>
        <button onclick="">Submit</button>
        <p>Values: </p>
    </div>

[请记住，这是我的问题的一个示例。]

使用摘要时请整页显示，以便更轻松地了解我的问题。

这就是我想要的（问题之间没有多余的界线）：

Answer 1

这是您的问题的解决方案。我在解决方案的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>

Answer 2

只需尝试上面制作宽度为100％的故事即可。

DirectivesComponent

如何使我的选择权紧贴我的问题？

2 个答案: