基础CSS输入大小调整问题

时间:2014-08-22 22:40:48

标签: css html5 flask zurb-foundation

我使用Foundation 5作为我最新的Python / Flask网络项目,并且对他们网站上展示的清洁和响应式设计非常感兴趣。

然而,当我在其中一个示例中包含相应的文件时,我得到了这种极其缺乏吸引力的显示行为,在我试图对齐它们的每种情况下,文本字段显然都大于搜索框并且未对齐:< / p>

My misaligned textfield and search button.

然而,当我访问Zurb的网站时,他们的网站非常合适,如果不完全一致的话。

enter image description here

这是我目前正在使用的代码,只是为了避免任何混淆 - 非常感谢任何反馈和输入,并为我所能想象的某些新手问题道歉。

<!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>

1 个答案:

答案 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