Некоторое пространство между элементами в строке

Question

Я хочу создать «резиновый» интерфейс, поэтому я использую div с шириной в%, но когда я пытаюсь заполнить 100% ширины несколькими div, они не смешиваются в строке, но в suome они имеют 100%.Если использовать таблицу, то все в порядке.Вот примеры:

<div style='white-space:nowrap;'>
    <div style='width:50%;border: 1px solid #4e5e6e;display:inline-table;'>A1</div>
    <div style='width:50%;border: 1px solid #a2f2d4;display:inline-table;'>A2</div>
</div>
<div style='white-space:nowrap;'>
    <div style='width:10%;border: 1px solid #4e5e6e;float:left'>A1</div>
    <div style='width:40%;border: 1px solid #a2f2d4;float:left'>A2</div>
    <div style='width:40%;border: 1px solid #4e5e6e;float:left'>A3</div>
    <div style='width:10%;border: 1px solid #a2f2d4;float:left'>A4</div>
</div>
<table style='width:100%'><tr style="width:100%";>
    <td style='width:10%;border: 1px solid #4e5e6e;'>A1</td>
    <td style='width:40%;border: 1px solid #4e5e6e;'>A1</td>
    <td style='width:40%;border: 1px solid #4e5e6e;'>A1</td>
    <td style='width:10%;border: 1px solid #4e5e6e;'>A1</td>
</td></table>

Если размер вашего окна достаточен, все они будут отображаться правильно, но если вы уменьшите его, кто-то прыгнет с их линии.Если я не четко выражен, я хочу отображать div в одной строке независимо от ширины.

Answer 1

решение было бы удалить пиксель с границы и поместить div внутри div% width с рамкой

Answer 2

Что сказал lucassp.

Решением было бы добавить отрицательное поле ко всему, что вы дали границе:

<td style='width:10%;border: 1px solid #4e5e6e; margin: -1px;'>A1</td>

Answer 3

Граница в 1 пиксель увеличивает ширину ящиков. Таким образом, ваши ящики будут иметь ширину 50% + 1px, 10% + 1px и т. Д.