試圖並排獲取兩個HTML輸入

所以我花了一些時間試圖弄清楚這一點，但最後我轉向了StackOverflow尋求幫助。我試圖讓我的搜索欄，並去按鈕顯示在一條線上，並有麻煩這樣做。試圖並排獲取兩個HTML輸入

的HTML代碼輸入是：

<nav class="sidebar"> 
    <input type="text" id="search" placeholder="search"> 
    <input type="button" name="button" value="Go" class="goButton"> 
    </nav>

而且CSS的兩個輸入如下：

#content .sidebar #search { 
    width: calc(100% - 45px); 
    border-radius: 0px; 
    height: 42px; 
    text-align: center; 
    color: #333333; 
    font-size: 14px; 
    margin-bottom: 21px; 
} 
/* Go button for search*/ 
#content .sidebar .goButton { 
    position: relative; 
    top: -48px; 
    width: 45px; 
    background-color: #BA2022; 
    color: #F3EBDE; 
    border-style: none; 
    text-transform: uppercase; 
    margin-top: 8px; 
    border-radius: 0px; 
    height: 42px; 
    text-align: center; 
    font-size: 14px; 
    margin-bottom: 21px; 
}

任何人都可以提出此修復？目前，輸入顯示如下：預先

enter image description here

感謝。

來源

2014-12-07 Ender The Xenocide

@ chipChocolate.py我一定用我已經發布了HTML。 – 2014-12-07 20:32:50

那麼，改變CSS選擇器。 – 2014-12-07 20:35:30

它被對齊時，文本框是有點小，按鈕的margin-top被刪除：

#content .sidebar #search { 
    width: calc(100% - 60px); 
    border-radius: 0px; 
    height: 42px; 
    text-align: center; 
    color: #333333; 
    font-size: 14px; 
    margin-bottom: 21px; 
} 
/* Go button for search*/ 
#content .sidebar .goButton { 
    position: relative; 
    width: 45px; 
    background-color: #BA2022; 
    color: #F3EBDE; 
    border-style: none; 
    text-transform: uppercase; 
    margin-top: 8px; 
    border-radius: 0px; 
    height: 42px; 
    text-align: center; 
    font-size: 14px; 
    margin-bottom: 21px; 
}

FIDDLE：http://jsfiddle.net/s0y93L87/

來源

2014-12-07 20:36:42 Verhaeren

謝謝！我知道它最終會成爲一件簡單的事情。 – 2014-12-07 20:43:06

我不會說這很愚蠢，這些設計問題總是很棘手。你的方法非常好，而且響應速度很快。 – Verhaeren 2014-12-07 20:50:32

儘量把這個：

#content .sidebar #search { 
    border-radius: 0px; 
    height: 42px; 
    text-align: center; 
    color: #333333; 
    font-size: 14px; 
    margin-bottom: 21px; 
    float: left; 
    width: 200px; 
} 

/* Go button for search*/ 
#content .sidebar .goButton { 
    position: relative; 
    top: -48px; 
    width: 45px; 
    background-color: #BA2022; 
    color: #F3EBDE; 
    border-style: none; 
    text-transform: uppercase; 
    border-radius: 0px; 
    height: 48px; 
    text-align: center; 
    font-size: 14px; 
    margin-bottom: 21px; 
    float: left; 
}

來源

2014-12-07 20:44:44

有是爲什麼將width: calc(100% - 45px);應用於文本輸入沒有爲45像素寬度按鈕留下足夠空間的幾個原因：

的瀏覽器添加填充到文本輸入（2個像素左右填充）（至少在Chrome）
該瀏覽器被添加邊框到文本輸入（2個像素左和右邊框）（至少在Chrome中）
由於文本輸入和按鈕不在同一行，因此只有一個空白字符將它們分開，並添加更多寬度。

定義文本輸入明確的填充和邊框這樣瀏覽器就不能復位，並調整×45像素相應47px（考慮左，右1px的邊框）：

#content .sidebar #search { 
    border:1px solid #aaa; 
    padding:0; 
    width: calc(100% - 47px); 
}

和刪除通過將它們放在同一行HTML中的兩個輸入端之間的空白：

<input type="text" id="search" placeholder="search"><input type="button" name="button" value="Go" class="goButton">

我也是從你刪除 CSS。

使用CSS重置可以幫助消除瀏覽器添加意外樣式的這種問題。

結果：http://jsfiddle.net/k305a0jo/1/

來源

2014-12-07 20:46:39

你試過把它放在一個表裏面？是這樣的：

<nav class="sidebar"> 
    <table> 
     <tr> 
      <td class='search'> 
       <input type="text" id="search" placeholder="search"> 
      </td> 
      <td class='go'> 
       <input type="button" name="button" value="Go" class="goButton"> 
      </td> 
     </tr> 
    </table> 
</nav> 




    .sidebar #search { 
    width: calc(100%-45px); 
    border-radius: 0px; 
    height: 42px; 
    text-align: center; 
    color: #333333; 
    font-size: 14px; 
} 
/* Go button for search*/ 
.sidebar .goButton { 
    top:-48px; 
    background-color: #BA2022; 
    width:45px; 
    color: #F3EBDE; 
    border-style: none; 
    text-transform: uppercase; 
    border-radius: 0px; 
    height: 42px; 
    text-align: center; 
    font-size: 14px; 
} 
td.search { 
} 
td.go { 
} 
tr { 
    width: calc(100%); 
    margin-bottom: 21px; 
}

這裏是一個的jsfiddle： http://jsfiddle.net/yzmkxfa7/4/

來源

2014-12-07 20:46:54 qubit

試圖並排獲取兩個HTML輸入

回答

相關問題