Элементы списка, не начинающиеся с начала

Question

У меня есть неупорядоченный список, и я пытаюсь отобразить некоторые элементы li внутри него. Однако первый элемент не начинает рендеринг с самого начала списка, и здесь есть небольшое поле. Как мне решить эту проблему и почему это происходит?

function App() {
  return (
    <ul
      style={{
        position: 'absolute',
        width: '75%',
        height: '5%',
        left: '12.5%',
        top: '25%',
        'list-style-type': 'none',
        'background-color': '#f8d7d7'
      }}
    >
      <li
        style={{
          width: '20%',
          float: 'left',
          height: '100%'
        }}
      />
      <li
        style={{
          width: '20%',
          float: 'left',
          height: '100%'
        }}
      />
      <li
        style={{
          width: '20%',
          float: 'left',
          height: '100%'
        }}
      />
    </ul>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 1

Существует несколько причин, по которым это происходит:

1. Ваш <ul> имеет position, установленный на absolute и с осталось 12% который добавляет пробел слева.

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

Answer 2

function App() {
  return (
    <ul
      style={{
        position: 'absolute',
        paddingLeft: '0px',
        width: '75%',
        height: '5%',
        left: '12.5%',
        top: '25%',
        'list-style-type': 'none',
        'background-color': '#f8d7d7'
      }}
    >
      <li
        style={{
          width: '20%',
          float: 'left',
          height: '100%'
        }}
      >list item 1 </li>
      <li
        style={{
          width: '20%',
          float: 'left',
          height: '100%'
        }}
      >list item 2 </li>
      <li
        style={{
          width: '20%',
          float: 'left',
          height: '100%'
        }}
      >list item 3 </li>
    </ul>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>