css - 如何在 CSS 中对齐此文本？

Question

我在 css 中遇到了一个非常烦人的问题。我正在尝试对齐表单中输入字段的所有文本(代码如下所示)。出于某种原因，两个单词长的文本被踢到第二行(例如下面的“名字”)。任何人都可以帮助我让它出现在一行中，因为我已经尝试改变了很多东西，但它对我不起作用。这是表单的代码(在 JSF 中)，我还附上了相关的 CSS 代码。谢谢

## JSF ##
    <div class="register"><h:form id="registerForm">
    <div class="white"><h2>Add Business Account</h2></div>
    <h:messages errorClass="errorMessage" infoClass="infoMessage"
        warnClass="warnMessage"></h:messages>
    <table>
        <tr>
            <td><h:outputLabel for="firstName">
                    <h:outputText class="generaltext" id="firstNameLabel" value="First Name" />
                </h:outputLabel></td>
            <td><div class="inputboxpadding"><h:inputText class="inputboxes" id="firstName"
                    value="#{registerBean.businessAccount.firstName}" size="20" required="true" 
                    requiredMessage="Required field" validatorMessage="First name must contain between 3 and 15 characters">
                    <f:validateLength minimum="3" maximum="15"/>
                    <f:ajax event="blur" render="fnamemessage" /></h:inputText>
                    </div></td>
                    <td> <div class="validationbox"><h:message id="fnamemessage" for="firstName" class="validation"/></div></td>
        </tr>
        <tr>
            </h:commandButton></div></td>
        </tr>
    </table>
    <h:link value="Back to login" outcome="login" />
</h:form></div>


## CSS ##
.register {
font-family: Arial, Helvetica, sans-serif;
background-color: #6495ED;
width: 500px;
height:auto;
min-height:700px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: auto;
border-style: solid;
border-width: 1px;
border-radius: 20px;
padding: 100;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}

.generaltext{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight:bold;
color: white;
padding-left:20px;
padding-right:20px; 
}

Answer 1

尝试为输入框的 div 指定宽度