边界

Question

如何使两个div水平
我给了display：inline-block但没有成功
在下面提供我的代码
哟告诉我如何解决它

  <div class ="name-list" >
    <input type="button" value="+New"><br>
    <div class='gettingValues' style='border:1px solid #000;'> getting form values
      <input data-name="edit" type="button" value="Edit" name="editHistory">
      <input data-name="delete" type="button" name="deleteHistory" value="Delete">
    </div>

  </div>

  <div class ="contact-details">
    <p>ADD OR EDIT CONTACT (FULL NAME)</p>
    <form id="localStorageTest" method="post" action="">
      <label>Name:</label>
      <input type="text" name="name" id="name" class="stored" value="" /><br>

      <label>Email:</label>
      <input type="email" name="email" id="email" class="stored" value="" /><br>

      <label>Message:</label>
      <textarea name="message" id="message" class="stored"></textarea><br>

      <input type="submit" class="demo-button" value="Submit" />
      <button type="reset" value="cancel">Cancel</button>
    </form>
  </div>

Answer 1

“display：inline-block”有margin-right: 4px。你应该margin-right: -4px

.name-list {
    width: 30%;
    border: 1px solid green;
    display: inline-block;
    margin-right: -4px;
}

.contact-details {
    width: 70%;
    border: 1px solid red;
    display: inline-block;
    margin-right: -4px;
}

Answer 2

以下样式允许在所有浏览器中并排显示div：

display: table-cell;

Answer 3

两个问题阻止你的内联块div并排坐着。

边界

默认情况下，边框会增加元素的大小！（GOTHCA！）所以实际上你的元素是（70％+ 2px + 30％+ 2px）或（100％+ 4px）你的总空间！当然，它不适合一条线。

这可以通过使用css box-sizing来修复！

box-sizing: border-box;

或calc函数！

calc(70% - 2px) and calc(30% - 2px)

文字差距

第二个问题是内联元素之间可能存在间隙，因为内联块是在文本之后建模的，html中元素之间的间隙会在页面上的元素之间产生间隙。

可以通过设置font-size来解决这个问题！

font-size: 0px;

但是别忘了把它放回去！

font-size: initial;

或者您可以删除元素之间的换行符！

<div>
</div><div>
</div>

显示内联块不会使divs水平

3 个答案:

边界

文字差距