如何删除输入按钮右侧的多余内容？

好吧我正在重新创建一个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

如何删除输入按钮右侧的多余内容？

回答

相关问题