如何刪除輸入按鈕右側的多餘內容？

好吧我正在重新創建一個PSD，我在網上找到了練習。在標題中有一個搜索欄和按鈕。在按鈕的右側有額外的內容佔用空間，這是我無法擺脫的。如何刪除輸入按鈕右側的多餘內容？

我加了的jsfiddle

請確保預覽擴展到左側儘可能

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Education Compaony</title> 
    <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
    <div class="header"> 
     <div class="branding"> 
     <h2>Education Department</h2> 
     <h5>A free PSD template</h5> 
     </div> <!-- /.Branding --> 
    <div class="directory"> 
     <div class="search"> 
     <input type="text"> 
     <input type="submit" value="Search"> 
     </div> <!-- /.Search --> 
     <div class="index"> 
     <ul> 
      <li>A - Z index | </li> 
      <li>Studenet Login | </li> 
      <li>Staff Login </li> 
     </ul> 
     </div> <!-- /.Index --> 
    </div> <!-- /.Directory --> 
    </div> <!-- /.Header --> 
    </body> 
</html> 

/* Font Import */ 
@import url('https://fonts.googleapis.com/css?family=Lora'); 

* { 
    box-sizing: border-box; 
} 

body { 
    margin: 0; 
    padding: 0; 
} 

.header{ 
    height: 95px;; 
    background-color: #FCD05D; 
    color: #3A302E; 
    font-family: 'Lora', sans-serif; 
} 

.branding { 
    float: left; 
    margin-left: 200px; 
} 

.branding h2 { 
    margin-top: 10px; 
    text-transform: uppercase; 
    font-size: 28px; 
} 

.branding h5 { 
    margin-top: -20px; 
    font-size: 16px; 
} 

.directory { 
    float: right; 
    margin-right: 200px; 
} 

.search { 
    background-color: black; 
    border: 5px solid black; 
    border-radius: 8px; 
    padding: 1px 0px 5px 12px; 
} 

.search input[type=text] { 
    background-color: #FCD05D; 
    border-radius: 3px; 
} 

.search input[type=submit] { 
    background-color: #595657; 
    color: #FCD05D; 
    border: 2px solid #595657; 
    border-radius: 3px; 
} 

.index ul { 
    list-style-type: none; 
    text-decoration: none; 
    margin-top: -0; 
} 

.index li { 
    margin-top: -20px; 
    font-size: 14px; 
    display: inline-flex; 
    word-spacing: 1px; 
}

來源

2017-06-29 Jack

您的搜索欄超出標題可以詳細說明您想要的內容嗎？ – LKG

根據您的需要添加寬度：輸入70％或任意數量 – tech2017

設置目錄或搜索的寬度 – gvmani

額外的空間從ul您的鏈接是未來。由於寬度是自動的，因此列表部分的寬度大於搜索部分的寬度，因此搜索部分將採用該寬度。

您可以將padding: 0設置爲ul列表以減少一些空間。它有一個自然填充左邊。由於列表的長度，這仍然會在右側留下一些空間。您可以將寬度設置爲搜索區域以防止列表打包。或者你可以讓左側的搜索部分浮動，但你將需要調整填充，使它看起來對稱

下面是一個例子

https://jsfiddle.net/jb7j6ysz/3/

.search { 
    background-color: black; 
    border: 5px solid black; 
    border-radius: 8px; 
    padding: 1px 12px 5px 12px; 
    float: left; 
} 
.index ul { 
    list-style-type: none; 
    text-decoration: none; 
    margin-top: 0; 
    padding: 0; 
}

我用浮新小提琴和補充填充0到ul。還調整了填充.search

來源

2017-06-29 15:29:11 Huangism

謝謝。最佳答案！ – Jack

索引div正常運行。用這個更新你的css

.index{ 
    position: absolute; 
    display:block; 
    left: 40%; 
}

來源

2017-06-29 15:31:20 Oluwaseye

由於你的UI項目，額外的空間來了。在你的CSS

ul{ 
    padding-left:0px; 
    }

來源

2017-06-29 15:37:50

添加這個我覺得你的問題是與.index div的寬度做。它和您的搜索欄都包含在相同的.directory股利。因爲兩者都是塊級元素，其寬度設置爲默認值auto，所以它們具有其父級的寬度，在這種情況下，它由最大子節點.index div設置。

通過將搜索欄設置爲display: inline-block;，它只會佔用它所需的寬度。

.search { 
    ... 
    display: inline-block; 
}

此外，用於.index DIV的ul具有padding-left默認情況下，您可能要另外設定。

來源

2017-06-29 15:41:13

如何刪除輸入按鈕右側的多餘內容？

回答

相關問題