Html 如何在所有浏览器上删除两个并排元素之间的空格

我有以下代码：

<div class="headmenus">
    <ul>
    <li><a href="index.php">HOME</a></li>
    <li><a href="about.php">ABOUT US</a></li>
    <li><a href="search.php">COURSES</a></li>
    <li><a href="vacancies.php">VACANCIES</a></li>
    <li><a href="contact.php">CONTACT US</a></li>  
    <li></li>           
    </ul>
 </div>
 <div class="searchform2">
    <form action="search.php#goto1" method="get" id="headersearch">
       <input type="hidden" name="p" value="0" />
       <input type="text" name="keyword" id="headerkeyword" placeholder="Search any keyword" value="" />
       <input type="submit" value="SEARCH" class="but1" />
    </form>
 </div>

以下是标题菜单：

.headmenus {
    background: none repeat scroll 0 0 #0086B2;
    display: inline;
    float: left;
    margin: 0;
    width: 74.3%;
}
.headmenus ul {
    border-bottom: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    display: inline;
    float: left;
    font-family: 'texgyreadventorregular';
    font-size: 14px;
    margin: 0;
    padding: 0;
    width: 100%;
}
.headmenus ul li {
    border-right: 1px solid #FFFFFF;
    color: #FFFFFF;
    display: inline;
    float: left;
    list-style-type: none;
    padding: 0;
    text-align: center;
    width: 13.35%;
}

.headmenus ul li a {
    color: #FFFFFF;
    display: inline;
    float: left;
    font-family: 'texgyreadventorregular';
    font-size: 14px;
    list-style-type: none;
    text-align: center;
    width: 100%;
    padding:5px 0px;
}

.headmenus ul li:hover {
    background: #89ab20;
    cursor: pointer;
}
.headmenus ul li.active {
    background: #89ab20;
}
.headmenus ul li:last-child {
    border-right: 0 none;
    float: right;
    width: auto; !important
}

---

现在的情况是，当我使用标题菜单的宽度时，我可以确保它触及输入文本框，但当我切换浏览器时，我需要重新编辑该宽度属性

您应该删除您的

右边框：1px solid 35; ffffffff在
.head菜单ul li
中。然后按钮将彼此相邻，没有间隙。有关示例，请参见（图元为灰色表示可见性）

*{box size:border-box；-moz-box size:border-box；}
负责在所有浏览器中将其相邻显示。如果您对“框大小”属性感兴趣，请查看

您需要确保您的
.searchform2
具有
宽度：25.6%！重要的
确保它填满所有的空白。
您不需要任何
框大小调整。只需设置
.searchform2
宽度：25.7%
，将
边框
移动到
.searchform2表单
，并添加
溢出：由于内部浮动元素而隐藏

参见小提琴：

我想解释一下：

元素的总宽度或高度=
宽度/高度
+
填充
+
边距
+
边框宽度

例如，如果设置为
width:50%
和额外的
border:2px soid，则元素的总宽度为
50%+4px

如果我们希望宽度完全符合某个比例，并且我们需要边框、填充或边距，那么我们需要更多的共印机：

<div class="cointainer_left_75_percents">
   <div class="container_with_borders_paddings_margins">
      ...
   </div>
</div>
<div class="cointainer_right_25_percents">
   <div class="container_with_borders_paddings_margins">
      ...
   </div>
</div>


...
...

或者我们可以使用实验性属性来改变边框、填充物和边距对总宽度和高度的影响。
你说的“触摸”是什么意思？你可以在基于触摸的设备上点击它，这应该不会有问题……啊，我的意思是我不希望元素之间有空格：）headmenu向左浮动，searchform向右浮动。如果你想让它们“接触”，那么就为它们设置相同的浮动方向。@atlavis，我不明白你的评论不，它不起作用：（发生的事情是，标题菜单的背景，当我玩它的宽度时，我可以确保它接触到输入文本框，但当我切换浏览器时，我需要重新编辑宽度属性检查，这就是你试图完成的吗？搜索框总是接触菜单？你看到蓝色背景之间有空格吗输入框呢？我想在所有浏览器中删除它。然后你需要对所有元素应用
框大小：border box；
。例如，请参阅。这会处理HTML框模型，它对所有浏览器都不相同，border box修复了这个问题。mm它不起作用，仍然在firefox上，有空格，我正在上载网站，给我等一下，我给你看看
<div class="cointainer_left_75_percents">
   <div class="container_with_borders_paddings_margins">
      ...
   </div>
</div>
<div class="cointainer_right_25_percents">
   <div class="container_with_borders_paddings_margins">
      ...
   </div>
</div>