0

我一直在完成这个网站的重新设计，并想在其中添加一些有趣的新功能。我有一个嵌套在页脚中的联系表格，以防止它看不见，但不会忘记。:p 我的脚本工作得很好，而且效果很好，fadeToggle但是作为点击元素的主标题在激活时似乎会左右抽动。我只是隐藏li而不是ul左右h3所以我不确定它为什么会移动。任何想法将不胜感激！这对我来说不是生或死，但它确实让我很恼火哈。

现场直播

修复前的 jsFiddle

jsFiddle 已修复

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 我确实知道输入标签不能进入 aul并且目前正在修复此联系表单上以前的开发人员错误>.>。至少我只需要自己处理这个网站的其余设计/开发！）

4

2 回答 2

2

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

form > ul {
    width: 240px;
}
于 2013-09-04T18:22:47.353 回答
1

您的标题是左对齐的，并且显示表单会扩大父元素，将其向左扩展。尝试右对齐标题 - 然后无论容器变得多宽，它都会保持右对齐。

于 2013-09-04T18:22:39.093 回答