html - 在我的表单上排列一些对象时遇到问题

Question

我在让我的按钮对齐时遇到问题。这是他们要做的事情：

这就是我希望他们做的事情：

这是我的代码：

  @using (Html.BeginForm("Logon2", "Account", FormMethod.Post))
  { 
    <div>
        <fieldset>
            <legend>Login</legend>

            <div class="editor-label">  
                @Html.LabelFor(m => m.UserName)
            </div>
            <div class="editor-field focus">
                @Html.TextBoxFor(m => m.UserName, new { @class = "GenericTextBox", onkeyup = "enableLogonButton()" })
                @Html.ValidationMessageFor(m => m.UserName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.Password, new { @class = "GenericPasswordBox", onkeyup = "enableLogonButton()" })
                @Html.ValidationMessageFor(m => m.Password)
            </div>
          <br/>

            <p>
              <input type="submit" disabled="disabled" value="Log On" onclick="DisableSubmitButton()"/>        
              <script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=HWXeUzAbOxyxKnb28ueDib8UFmw5ek2tyWQ6mXXt6Q06AQAlQrAtpBz"></script>
            </p>        

          <p>
            If you need to retrieve your username @Html.ActionLink("click here.", "ForgotUsername", "Account")<br/>
            If you need to reset your password @Html.ActionLink("click here.", "ForgotPassword", "Account")
          </p>

        </fieldset>
    </div>
}

我什至不知道如何让他们即使彼此出现。

有什么建议么？

Answer 1

Depending on what the GoDaddy Javascript outputs, you may need only this CSS:

input[value='Log On'] {vertical-align:17px}

and you won't need to adjust your HTML, or try to figure out the class names the GoDaddy seal uses.

Answer 2

在 chrome 中，您可以“实时”编辑您的 css，只需右击元素并转到“检查元素”

生病做类似的事情：

     <div style="
float: left;
margin-top: 3px;
margin-right: 10px;
      ">
          <input type="submit" disabled="disabled" value="Log On" onclick="DisableSubmitButton()"/>        
    </div>
    <div>
          <script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=HWXeUzAbOxyxKnb28ueDib8UFmw5ek2tyWQ6mXXt6Q06AQAlQrAtpBz"></script>
    </div>

不知道你的布局 css 是怎样的，但它应该给你 ua 基本的想法

Answer 3

为包含登录名和图像的 p 标记提供类名“get_in_middle”。然后放置这个CSS，

p.get_in_middle input,p.get_in_middle img{
    vertical-align:middle;
}

http://jsfiddle.net/TUGup/9/

Answer 4

尝试查看 chrome 元素检查器，从 Godaddy 加载什么类型的对象。它将有一些类或 ID，然后在您的 CSS 文件中使用此类或 Id 名称创建规则：

.class-of-godaddy-element {
   position:relative;
   top: 5px; //this may be change according to your style
}

看看这个，我在 JS Fiddle 上做了同样的例子：

http://jsfiddle.net/zur4ik/TUGup/7/