我使用Foundation 5作为我最新的Python / Flask网络项目,并且对他们网站上展示的清洁和响应式设计非常感兴趣。
然而,当我在其中一个示例中包含相应的文件时,我得到了这种极其缺乏吸引力的显示行为,在我试图对齐它们的每种情况下,文本字段显然都大于搜索框并且未对齐:< / p>
然而,当我访问Zurb的网站时,他们的网站非常合适,如果不完全一致的话。
这是我目前正在使用的代码,只是为了避免任何混淆 - 非常感谢任何反馈和输入,并为我所能想象的某些新手问题道歉。
<!DOCTYPE html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PropertyMates</title>
<!-- If you are using the CSS version, only link these 2 files, you may add app.css to use for your overrides if you like -->
<link rel="stylesheet" href="{{url_for('static', filename='css/normalize.css') }}">
<link rel="stylesheet" href="{{url_for('static', filename='css/foundation.css') }}">
<!-- If you are using the gem version, you need this only -->
<link rel="stylesheet" href="css/app.css">
<script src="{{url_for('static', filename='js/vendor/modernizr.js') }}"></script>
</head>
<body>
<nav class="top-bar" data-topbar="" role="navigation">
<!-- Title -->
<ul class="title-area">
<li class="name"><h1><a href="#">Sexy Top Bar</a></h1></li>
<!-- Mobile Menu Toggle -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<!-- Top Bar Section -->
<section class="top-bar-section">
<!-- Top Bar Left Nav Elements -->
<ul class="left">
<!-- Search | has-form wrapper -->
<li class="has-form">
<div class="row collapse">
<div class="large-8 small-9 columns">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-4 small-3 columns">
<a href="#" class="alert button expand">Search</a>
</div>
</div>
</li>
<li class="has-form">
<a class="button">Test</a>
</li>
</ul>
<!-- Top Bar Right Nav Elements -->
<ul class="right">
<!-- Divider -->
<li class="divider"></li>
<!-- Dropdown -->
<li class="has-dropdown not-click"><a href="#">Item 1</a>
<ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="#">Item 1</a></li>
<li><label>Level One</label></li>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li class="divider"></li>
<li><a href="#">Sub-item 3</a></li>
<li class="has-dropdown not-click"><a href="#">Sub-item 4</a>
<!-- Nested Dropdown -->
<ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li><li class="parent-link show-for-small"><a class="parent-link js-generated" href="#">Sub-item 4</a></li>
<li><label>Level Two</label></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li><a href="#">Sub-item 4</a></li>
</ul>
</li>
<li><a href="#">Sub-item 5</a></li>
</ul>
</li>
<li class="divider"></li>
<!-- Anchor -->
<li><a href="#">Generic Button</a></li>
<li class="divider"></li>
<!-- Button -->
<li class="has-form show-for-large-up">
<a href="http://foundation.zurb.com/docs" class="button">Get Lucky</a>
</li>
</ul>
</section></nav>
<!-- body content here -->
{% block content %}{% endblock %}
<script src="{{url_for('static', filename='js/vendor/jquery.js') }}"></script>
<script src="{{url_for('static', filename='js/foundation.min.js') }}"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
答案 0 :(得分:1)
按如下方式更改CSS:
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea {
background-color: #FFF;
font-family: inherit;
border: 1px solid #CCC;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
color: rgba(0, 0, 0, 0.75);
display: block;
font-size: 0.875rem;
margin: 0px 0px 1rem;
padding: 0.5rem;
height: 30px;
width: 100%;
box-sizing: border-box;
transition: box-shadow 0.45s ease 0s, border-color 0.45s ease-in-out 0s;
}
和
.top-bar input, .top-bar .button, .top-bar button {
font-size: 0.875rem;
position: relative;
top: 7px;
height: 30px;
}
您才明白:我将rem中的高度尺寸更改为两个元素的固定尺寸(您可以将30px更改为您想要的任何值)。 See fiddle here