爲什麼我的輸入/表單元素沒有行高？

我有一排元素，其他元素都會接受一個行高，除了搜索，這是一個帶輸入和絕對位置搜索按鈕的<form class="">。爲什麼我的輸入/表單元素沒有行高？

下面是它應該是什麼樣子：

與它是如何看（無行高，項目堅持到頂部）：

我已經試過幾件事情，例如顯示在線並刪除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; 
    } 
}

來源

2017-10-04 Daniel Moss

由於某些原因，行高不適用於文本輸入。但它看起來像你想要推下來，而不是改變輸入文本的行高。你有沒有嘗試一個頂級保證金？ – sn3ll

保證金的作用，是的，但不幸的是，我想使用行高來保持一致性，我的構建器允許我通過拖動容器的行高來根據用戶的鼠標移動將事物縮小/變大。 –

對於輸入元素，不能使用行高，因爲它僅適用於內部的文本節點，而不適用於輸入元素本身的高度。（1）使用'top：50％'和'margin-top： - （...）px'或'translateY（-50％）'，（2）使用flexbox ，（3）使用'display：table-cell'和'vertical-align：center' – Terry

問題是line-height不適用於<input>。 期間。

你最好的選擇，因爲據我可以告訴是使用margin/padding的間距，或者，如果在一條線上的元素都具有特定的line-height：

.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; 
}

這將使「搜索」文本看起來像你期望的，有理由留下很多空間在右邊。

這樣，表單本身將需要等於60px（假設文本大小爲12px），留下一個很好的，水平居中的項目，與其他元素看起來會很好。代表性的觀點：

所以該公式將是這樣的

在我們的例子

calculate_margins_for_search_element = ((line_height - (form_itself: padding-top + padding-bottom + inner-elem))/2)，，這導致

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

導致填充/邊距+每個底部35px。

顯然，取決於<input>裏面的內容，您可以獲得邊距的精確數字或近似值，必要時可以通過眼睛來玩。

不幸的是，我相信這會產生一些關於響應和動態內容的問題，但有些@media-query連同一些text-limiters and max-height/width應該照顧到這個問題。

來源

2017-10-04 23:03:46

嘗試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; 
}

來源

2017-10-04 18:11:58 fbuchlak

爲什麼我的輸入/表單元素沒有行高？

回答

相關問題