Question

我有一行元素，除了搜索之外，每个其他元素都会接受一个行高，这是一个带有输入的<form class="">和一个绝对位置搜索按钮。

以下是它的外观：

VS。实际看起来如何（没有行高，项目粘在上面）：

我尝试了多项内容，例如在线显示和删除已应用的Chrome的默认-webkit样式，但似乎都没有效果。

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" href="../../favicon.ico">

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/header/style-header_1.css" rel="stylesheet">

    <!-- External CSS -->
    <link rel="stylesheet" href="socicon/style.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400i" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="row">
                <div class="header-social-icons-list col-sm-4">
                    <ul id="social-icons-header">
                        <li id="facebook"><a href="www.facebook.com"><i class="socicon-facebook"></i></a></li>
                        <li id="googleplus"><a href="www.plus.google.com"><i class="socicon-twitter"></i></a></li>
                        <li id="twitter"><a href="www.twitter.com"><i class="socicon-googleplus"></i></a></li>
                    </ul>
                </div>
                <div class="header-logo col-sm-4">
                    <img src="img/logo.png" alt="Logo"><a href="www.google.com"></a>
                </div>
                <div class="header-search-box col-sm-4">
                    <form class="header-search" method="get" action="post.php">
                        <input name="search-box" type="text" placeholder="Search" class="form-control"/>
                        <input name="search-button" type="button" value="Search" class="button-control"/>
                    </form>
                </div>
            </div>
            <ul class="menu col-sm-12">
                <li class="menu-item-1"><a href="http://www.google.com/">Home</a>
                    <ul class="menu-dropdown">
                        <li class="menu-dropdown-item-1"><a href="http://www.google.com/">SubOne</a></li>
                        <li class="menu-dropdown-item-2"><a href="http://www.google.com/">Sub Two</a></li>
                        <li class="menu-dropdown-item-3"><a href="http://www.google.com/">Sub Three</a></li>
                    </ul>
                </li>
                <li class="menu-item-2"><a href="http://www.google.com/">Features</a></li>
                <li class="menu-item-3"><a href="http://www.google.com/">Recipes</a></li>
                <li class="menu-item-4"><a href="http://www.google.com/">About</a></li>
                <li class="menu-item-5"><a href="http://www.google.com/">Contact</a></li>
            </ul>
        </div>
    </header>
</body>
</html>

和CSS：

/* Global Line-height */

.header .header-social-icons-list,
.header .header-search-box,
.header .header-logo {
    line-height: 130px;
}


.header .header-social-icons-list a {
    text-decoration: none;
}

.header .header-social-icons-list li {
    display: inline;
    margin-right: 14px;
    text-decoration: none;
}

.header .header-social-icons-list ul {
    list-style: none;
    padding: 0 0 0 0;
}

.header .header-logo img {
    max-height: 110px;
}

.header .menu {
    line-height: 60px;
    z-index: 1;
    text-align: center;
    margin-top: 24px !important;
}

.header .menu > li {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0 12px 0 12px;
    text-align: center;
}

.header .menu li a {
    color: #525252;
}

.header .menu li a:hover {
    text-decoration: none;
    color: #777777;
}


/* Dropdown */

.header .menu .menu-dropdown {
    line-height: 24px;
    margin-top: 12px;
    background-color: white;
    padding-left: 0;
    position:absolute;
    z-index: -1;
    opacity: 0;
    top: 100%;
    left: 0;
    transition:opacity linear 0.1s;
    border: 1px solid #e5e5e5;

    -webkit-box-shadow: 0px 0px 130px -46px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 130px -46px rgba(0,0,0,1);
    box-shadow: 0px 0px 130px -46px rgba(0,0,0,1);
}

.header .menu li:hover .menu-dropdown {
    z-index: 2;
    opacity: 1;
}

.header .menu .menu-dropdown li {
    margin: 0;
    text-align: left;
    padding: 13px 13px 13px 13px;
    display: block;
    white-space: nowrap;
    border-bottom: 1px solid #e5e5e5;
}

.header .menu .menu-dropdown li:last-of-type {
    border-bottom: 0;
}

.header .menu .menu-dropdown li a {
}

.header .header-search {
    float: right;
    margin: 0;
    position: relative;
}

.header .header-search .form-control {
    padding: 0 45px 0 20px;
}

.header .header-search .form-control {
    border-radius: 30px;
    border: 2px solid #f0f0f0;
    box-shadow: none;
    width: 240px;
    height: 48px;
}

.header .header-search .form-control:focus {
    border: 2px solid #dcdcdc;
}

.header .header-search .button-control {
    text-indent: -99999px;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 30%;
    right: 24px;
    border: none;
    background: url('../../svg/search.svg') 0 0 no-repeat;
}


/* Responsive */

@media only screen and (max-width: 768px) {

    .header .menu {
        display: none;
    }

    .header .header-social-icons-list,
    .header .header-search,
    .header .header-menu-bottom {
        display: none;
    }

    .header .header-logo {
        padding: 48px 0 48px 48px;
    }

    .header .header-logo img {
        max-width:100%;
        image-rendering: auto;
    }

}

@media only screen and (max-width: 468px) {

    .header .header-logo {
        bottom: 60px;
    }
}

@media only screen and (max-width: 990px) {

    .header .header-search .form-control {
        width: 120px;
    }
}

Answer 1

尝试flexbox

HTML：

...
<header class="header">
  <div class="container">
    <div class="row flexExample">
      ...

CSS：

.flexExample {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

Answer 2

问题是line-height对<input>不起作用。的期。

你最好的选择，据我所知，使用margin / padding作为间距，或者，如果一行中的所有元素都有特定的行高：

.element-one, .element-two, .my-input-element { /* .my-input-element won't get this, since it's an input */ line-height: 130px; }

考虑执行以下操作：

.my-input-element .class-for-the-text-form-itself { padding: 24px 30px 24px 20px; }

这将使＆＃34;搜索＆＃34;正如你所期望的那样，文字看起来是合理的，左边有很多空间。

这样，表单本身将采用相等的~60px（假设文本大小为12px），留下一个漂亮的，水平居中的项目，与其他元素看起来很好。代表性观点：

所以公式就像

calculate_margins_for_search_element = ((line_height - (form_itself: padding-top + padding-bottom + inner-elem)) / 2)，在我们的例子中，结果是

((130-(24+24+12)) / 2

导致填充/ margin-top +底部各35px。

显然，根据<input>内部的内容，您可以获得边距的精确数字或近似值，必要时通过眼睛进行播放。

不幸的是，我认为这可能会产生一些有关响应的问题以及何时有动态内容，但有些@media-query和一些text-limiters and max-height/width应该会解决问题。

为什么我的输入/表单元素的行高不起作用？

2 个答案: