Question

我是前端技术的新手。我正在尝试建立一个简历网站。我有2个固定的div。一个在顶部作为导航栏工作。此div无法在移动设备上正确呈现。它只显示4个按钮，休息不是渲染。

我的contact-me-form div显示在800像素的滚动条上。我为此使用了Jquery。尽管我在IE11上的联系我形式渲染不好，但我对Chrome浏览器有很好的看法。

TRUE查看： [IMG] http://i62.tinypic.com/fjjgau.png[/IMG]

腐败的联系我形式 [IMG] http://i58.tinypic.com/2ccmoag.png[/IMG]

损坏的固定导航栏：[IMG] http://i59.tinypic.com/5lxil4.jpg[/IMG]

欢迎任何解决此问题的建议。顺便说一句：我使用的是HTML5。

<nav class="navbar">
    <ul class="menu">
        <li><a class="btn btn-alt" href=#aboutme>aboutMe</a></li>
        <li><a class="btn btn-alt" href=#education>education</a></li>
        <li><a class="btn btn-alt" href=#workhistory>workHistory</a></li>
        <li><a class="logo" href="#top">||</a></li>
        <li><a class="btn btn-alt" href=#generalskills>generalSkills</a></li>
        <li><a class="btn btn-alt" href=#knowledge>knowledge</a></li>
        <li><a class="btn btn-alt" href=#myWorks>myWorks</a></li>
    </ul>
</nav>


.navbar {
    background-color: #3149e6;
    position: fixed;
    width: 100%;
    z-index: 0;
    opacity: 0.8;
    padding: 0;
    height: 50px;
}

.menu li {
    display: inline-block;
}

.menu li a{
    text-decoration: none;
}
.btn {
    display: inline-block;
    margin: 0;
}

.btn-alt {
    padding: 10px 30px;
    height: 30px;
    line-height: 30px;
    font-family: "Open Sans Condensed";
    color: aliceblue;
}

与我联系表格：

    <div id='contact'>
                <div id='form_container'>
                    <div id='form_elements'>
                        <form action="mailto:@hotmail.comtr?subject=Hey let's have a talk" method="POST" enctype="text/plain">
                            <fieldset>
                                <legend><h3>contactMe</h3></legend>
                                <input type='text' placeholder='Your Name' size="30" name="Name">
                                <input type='text' placeholder='Your E-Mail' size="30" name="E-Mail">
                                <textarea rows="7" cols="40" placeholder='Write your message here.' name="comment"></textarea>
                                <input  type="submit" value="Submit">
                                <input  type="button" value="close" id="close" name="close">
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>

#contact{
    padding-left: 100px;
    padding-right: 100px;
    width: 320px;
    margin: 0 auto;
    display: block;
    position: fixed;
    z-index: 1;
    right: 0;
    bottom: 0;
}
#form_container {
    padding-top: 100px;
    padding-bottom: 20px;
    margin: 0 auto;
    display: block;

}
#form_elements{
    margin: 0 auto;
    text-align: center;
}

#form_elements fieldset{
    border: 1px dotted #5690e6;
    border-radius: 20px;
    box-shadow: black 0px 3px 8px;
}

#form_elements input, textarea{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin: 10px auto;
    resize:none;
}
#form_elements input{
    display: inline-block;
    width: 150px;
    margin-right: 10px;
    margin-left: 10px
}

Answer 1

您的顶级菜单栏无法渲染，因为您在btn-alt类中使用固定宽度度量（px）表示填充。

如果您说每个菜单项必须在每一侧都有30px填充，这意味着每个菜单选项将是60px +文本的宽度。你有6个这样的菜单选项，因此填充的MIN宽度为360px ..

更好的方法是以％表示宽度，然后设置最小宽度属性，这样菜单项就可以互相推送了。

.menu li {
    width: 16.6667%;
    min-width: 100px;
}

如果您真的对优化移动设备感兴趣，请结帐@media queries

与此同时，您的代码已更新http://jsfiddle.net/vs8mwebx/

固定的div在移动设备上的IE和导航栏上无法正确呈现

1 个答案: