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

Question

У меня есть список, содержащий элементы. Список будет немного похож на таблицу. Каждый элемент списка представляет строку. Каждый абзац представляет столбец. Таблица имеет всего 2 столбца. Таким образом, первый абзац должен лететь влево, а параграф 2 должен плавать вправо.

Так вот что я сделал:
Нет реального html/css, только некоторый псевдокод. Но я думаю, вы поняли это.

ul list-style-type none 
    li 
    p float left 
    p float right 
    div clear both 
    li 
    ... 
    li 
    ... 
    .. 
/ul 

Тем не менее, у каждого предмета есть очень большие поля: Но я хочу иметь очень малый запас между каждым элементом. Я уже заменил абзацы элементами div, которые сделали его немного лучше. Но это все еще слишком много.

Затем я заставил (!important) приписать на 0, что совсем не помогло. Отрицание маржи работает. Ура. Но это вроде глупо, нет?

Итак, мой фактический вопрос: Существуют ли другие/лучшие способы уменьшения разницы между элементами списка [но заданием отрицательного поля]?

Answer 1

В соответствии с моим комментарием:

Пункты естественно иметь запас ...

ul{ 
 
    list-style: none; 
 
    } 
 
li{ 
 
    /* To demonstarte issue */ 
 
    background: #dadada; 
 
    border: 1px solid #000; 
 
    } 
 
p{ 
 
    background: red; 
 
    } 
 
/* Self clear content */ 
 
li:after{ 
 
    clear: both; 
 
    content: ""; 
 
    display: table; 
 
    } 
 
.left{ 
 
    float: left; 
 
    width: 40%; 
 
    } 
 
.right{ 
 
    float: right; 
 
    width: 40%; 
 
    }

<ul> 
 
    <li> 
 
    <p class="left">Left floated paragraph</p> 
 
    <p class="right">Right floated paragraph</p> 
 
    </li> 
 
    <li> 
 
    <p class="left">Left floated paragraph</p> 
 
    <p class="right">Right floated paragraph</p> 
 
    </li> 
 
    </ul>

После того, как сбросить ваш запас ...

ul{ 
 
    list-style: none; 
 
} 
 
li{ 
 
    /* To demonstarte issue */ 
 
    background: #dadada; 
 
    border: 1px solid #000; 
 
    margin: 0; 
 
} 
 
p{ 
 
    background: red; 
 
    /* Remove the "natural" margin */ 
 
    margin: 0; 
 
} 
 
/* Self clear content */ 
 
li:after{ 
 
    clear: both; 
 
    content: ""; 
 
    display: table; 
 
} 
 
.left{ 
 
    float: left; 
 
    width: 40%; 
 
} 
 
.right{ 
 
    float: right; 
 
    width: 40%; 
 
}

<ul> 
 
    <li> 
 
    <p class="left">Left floated paragraph</p> 
 
    <p class="right">Right floated paragraph</p> 
 
    </li> 
 
    <li> 
 
    <p class="left">Left floated paragraph</p> 
 
    <p class="right">Right floated paragraph</p> 
 
    </li> 
 
</ul>

... предполагая, что это то, что вы после?