我有两个输入,一个按钮假设在一个div中。我已经在这三个元素中使用了内联块。但是,Safari中的按钮太低,但在Chrome和Firefox中没问题。任何人都知道如何解决它?
<div class="simple-search">
<div class="keywords search-element">
<label for="simple_search_key">Key</label><br>
<input placeholder="e.g. " type="text" name="simple_search[keywords]" id="simple_search_keywords">
</div>
<div class="location search-element">
<label for="simple_search_Location">Location</label><br>
<input placeholder="e.g. " type="text" name="simple_search[location]" id="simple_search_location">
</div>
<div class="actions search-element primary-button">
<input type="submit" name="commit" value="Search">
</div>
.primary-button {
background-color: lime;
box-sizing: border-box;
border-radius: 4px;
}
.primary-button :hover {
background-color: lime;
cursor: pointer;
}
.primary-button input {
background-color: transparent;
color: white !important;
}
.primary-button.disabled {
background: #ecf7e2;
pointer-events: none;
cursor: default;
}
.simple-search {
margin: 0 auto;
text-align: center;
width: 80%;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 8px;
height: 80px;
padding: 2.2em 2.5em;
}
.search-element {
display: inline-block;
margin: 10px;
line-height: 2;
width: 30%;
margin-top: -5px;
}
.search-element label {
color: white;
float: left;
}
.search-element input {
border: none;
border-radius: 4px;
color: blue;
font-size: 1.5em;
height: 30px;
margin-top: .25em;
padding: .75em;
outline: none;
width: 96%;
}
.search-element.primary-button {
height: 60px;
}
.search-element.primary-button input {
height: 52px;
}
.results {
margin: 13px;
padding: 2.2em 10.5em;
}
.results .search-result {
margin: 10px;
margin-left: 0px;
margin-bottom: 30px;
}
.results .search-result .job-title {
font-size: 3ex;
margin-bottom: 10px;
}
.results .search-result .company-name, .results .search-result .location, .results .search-result .date {
display: inline-block;
margin-right: 10px;
}
.results .search-result .company-name {
font-family: monospace;
font-size: large;
}