水平放置的提交按钮和错误消息的正确对齐

Question

我正在尝试将yes和no按钮水平对齐并位于通知的中心。此外，我想将标题和描述与通知中心的"是"one_answers"否"按钮对齐。

以下是一个jsFiddle：

$(document).ready(function() {
  $("#form").validate({
    rules: {
      time: {
        required: true,
        number: true
      },
      title: "required"
    },
    messages: {
      time: "Please enter time(digit) in Seconds",
      title: "Please enter the title"
    }
  });
  $("#notify3").hide();
  $("#c").click(function(e) {
    if ($('#form').valid()) {
      $("#notify3").slideDown();
      var timeOut = parseInt($("#time").val()) * 1000;
      var str = $("#title").val();
      var str1 = $('#desc').val();
      $('.message').append(str, "</br>", str1);
      setTimeout(function() {
        $("#notify3").slideUp();
      }, timeOut);
    }
    return false;
  });
  $("#yes").click(function(e) {
    $("#notify3").slideUp();
    $(".cy").slideDown(500).delay(1000).slideUp(500);
  });
  $("#no").click(function(e) {
    $("#notify3").slideUp();
    $(".cn").slideDown(500).delay(1000).slideUp(500);
  });

});

#notify3 {
  width: 40%;
  position: absolute;
  top: 50%;
  left: 30%;
  height: 85px;
  background: #CCCCCC;
  opacity: 0.8;
  display: none;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-style: solid;
  border-color: black;
}
#confirm {
  width: 20%;
  position: absolute;
  top: 0;
  left: 40%;
  height: 50px;
  background: #FFFF00;
  opacity: 0.5;
  display: none;
}
.message {
  font-size: 20px;
  width: 100%;
  text-align: center;
  padding: 10px;
}
.message .y,
.n {
  bottom: 0;
  right: 0;
}
#form .formelement {
  display: inline-block;
  padding: 10px 10px;
  width: 900px;
}
#form .formelement label {
  float: left;
  text-align: left;
  width: 110px;
}
#form .formelement label.error {
  color: red;
  display: inline-block;
  margin: 4px 0 10px 100px;
  padding: 0;
  text-align: left;
  width: 900px;
}

<div id="confirm" class="cy">
  <h3 style="text-align:center;">Approved</h2></div>
<div id="confirm" class="cn"><h3 style="text-align:center;">Reject</h2></div>
<div id="notify3">
    <div class="message">
        <div class="y"><input type="submit" class="submit" value="Yes" id="yes"/>
        <input type="submit" class="submit" value="No" id="no"/>
        </div>
    </div>
</div>
<fieldset>
<form action="" id="form" >
            <div class="formelement">
                <label for="time">Time(in Sec)* : </label>
                <input type="text" name="time" id="time"/>
            </div>
            <div class="formelement">
                <label for="title">Title* : </label>
                <input type="text" name="title" id="title"/>
            </div>
            <div class="formelement">
                <label for="desc">Description : </label>
                <input type="text" name="desc" id="desc"/>
            </div>
            <div class="formelement">
                <input type="submit" value="Confirm" class="submit" id="c"/>
            </div>
</form> 
</fieldset>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="valid.js"></script>

Answer 1

请看这里的JS Fiddle。我希望它能帮助你。为消息使用一些额外的类。

<div class="cnfmsg"></div>

http://jsfiddle.net/fwsk1rq4/8/

新Fiddle：http://jsfiddle.net/fwsk1rq4/10/

Answer 2

尝试从id "#notify3"中删除height:85px并用padding: 10px 0更新类".message"将解决您的问题！！

Fiddle演示