Question

我一直在完成这个网站的重新设计，并希望在其中添加一些有趣的新功能。我有一个嵌套在页脚中的联系表单，以防止它看不见，但不要忘记。：p我的脚本工作得非常好，而fadeToggle可以很好地完成这个技巧，但主要的标题，作为点击元素，似乎在激活时左右摆动。我只隐藏li而不是ul或h3所以我不确定它为什么会移动。任何想法将不胜感激！这对我来说不是生死攸关的，但它确实让我感到厌烦。

HTML

<div class="formS">
    <span class="footerT">© Copyright 2013 Ohio Association of Health Underwriters</span>
    <form action="" method="post">
      <ul>
        <h4>Contact Us (click here)</h4>
        <input type="hidden" name="subject" value="Submission" /> 
        <input type="hidden" name="redirect" value="thankyou.html" />
        <li><label for="name">Name</label>
        <input type="text" name="name" id="name"></li>

        <li><label for="zip">Zip</label>
        <input type="text" name="zip" id="zip"></li>

        <li><label for="city">City</label>
        <input type="text" name="city" id="city"></li>

        <li><label for="telephone">Telephone</label>
        <input type="text" name="telephone" id="telephone"></li>

        <li><label for="email">Email</label>
        <input type="text" name="email" id="email"></li>

        <li><label for="comments">I would like to know:</label>
        <textarea name="comments" id="comments" cols="40" rows="5"></textarea></li>

        <li><button name="submit" type="submit" class="submit" id="submit" value="Submit">Submit</button></li>

        <input type="hidden" name="form_order" value="alpha"/>
        <input type="hidden" name="form_delivery" value="hourly_digest"/>
        <input type="hidden" name="form_format" value="text"/>
      </ul>
  </form>
</div>

CSS

/* Contact form page */

.formS {
width: 960px;
margin: 0 auto;
padding: 0;
}

form > ul           {
font-size: 18px;
padding: 0;
margin: 0;
float: right;
    list-style-type:none;
}

form > ul > li {
padding: 5px;
display: none;
}

form { 
text-align:left; 
padding: 0 10px 10px 10px;
height: 408px;
}

.formS > form > ul > li > label     {
float: left;
width: 50px;
margin:5px 10px 0 0;
text-align:right;
display:block;
background:none;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

input:focus, textarea:focus {
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #fff;
text-shadow: 0 1px 0 #2b2b2b;
}

textarea {
width: 150px; 
height: 50px;
border: 3px solid rgba(255, 255, 255, 0.5); 
padding:5px; 
background: rgba(0, 0, 0, 0.1); 
border-radius: 5px;
box-shadow: 0 1px 3px #2b2b2b inset;
resize: vertical;
}

.formS > form > ul > li > input {
width: 150px; 
height: 15px;
border: 3px solid rgba(255, 255, 255, 0.5); 
padding:5px; 
background: rgba(0, 0, 0, 0.1); 
border-radius: 5px;
box-shadow: 0 1px 3px #2b2b2b inset;
}

的jQuery

$('form ul h4').on('click', function() { 
    $('form > ul > li').stop(true).fadeToggle(1500); 
});

（PS我知道输入标签不能进入ul并且目前正在修复此联系表单上的先前开发人员错误＆gt;。＆gt;。至少我只需处理自己的问题本网站的其余部分的设计/开发！）

Answer 1

<ul>的宽度由其中的可见项决定。您需要在<ul>上指定宽度与联系表单的完全可见版本一样宽。例如：

form > ul {
    width: 240px;
}

Answer 2

您的标题是左对齐的，并且显示表单会扩展父元素，将其展开到左侧。尝试右对齐标题 - 无论容器有多宽，它都会保持正确对齐。

h3在淡入或淡出后移位

2 个答案: