HTML 表单对齐按钮和其他修改

Question

我必须创建一个教育网站模板才能开始。我需要帮助来进行以下更改:

1. 移除文本框上的圆 Angular ？
2. 在同一行(水平)显示登录和重置按钮
3. 对齐单选按钮和复选框的文本。

这是我的 HTML 脚本:

<form name="mylogin" action="validatepassword.php" method="post" id="mylogin">
  <table align="center" border="0" cellpadding="4" cellspacing="4">
    <tr align="center" valign="top">
      <td>
        <p align="center">
          <font size="5">Novell Services Login</font>
        </p>
        <table align="center" border="0">
          <tr align="left">
            <td>Username:</td>
            <td>
              <input type="text" name="username" size="30">
            </td>
          </tr>
          <tr align="left">
            <td>Password:</td>
            <td>
              <input type="password" name="password" size="30">
            </td>
          </tr>
          <tr align="left">
            <td>City of
              <br>Employment:</td>
            <td>
              <input type="text" name="city" size="30">
            </td>
          </tr>
          <tr align="left">
            <td>Web server:</td>
            <td>
              <select name="webserv" size="1">
                <option value="default" selected>--- Choose a server ---</option>
                <option value="Human Resources">Human Resources</option>
                <option value="Development">Development</option>
                <option value="Accounting">Accounting</option>
                <option value="Sales">Sales</option>
              </select>
            </td>
          </tr>
          <tr>
            <td colspan="2" align="left" height="25" valign="top">
              <p></p>
            </td>
          </tr>
          <tr align="left">
            <td>Please specify
              <br>your role:</td>
            <td>
              <input name="role" value="admin" type="radio">Admin
              <br>
              <input name="role" value="engineer" type="radio">Engineer
              <br>
              <input name="role" value="manager" type="radio">Manager
              <br>
              <input name="role" value="guest" type="radio">Guest
            </td>
          </tr>
          <tr>
            <td colspan="2" align="left" height="25" valign="top" width="121">
              <p></p>
            </td>
          </tr>
          <tr align="left">
            <td>Single Sign-on
              <br>to the following:</td>
            <td>
              <input name="mail" type="checkbox">Mail
              <br>
              <input name="payroll" type="checkbox">Payroll
              <br>
              <input name="selfservice" type="checkbox">Self-service
              <br>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <input value="Login" type="submit">
        <input type="reset">
      </td>
    </tr>
  </table>
</form>

Answer 1

对于输入应用falowing css:

input {
    -webkit-border-radius: 0;
    -moz-border-radius:0 ;
    border-radius: 0;
}

对于单选框和按钮试试这个:

input[type="submit"],input[type="reset"],input[type="radio"] {
    display: inline;
}

jsfiddle: https://jsfiddle.net/456tc85z/