Trying to get rid of whitespace to left of ul element

Question

Trying to float a ul element to the left and tried googled solutions that say to float left and padding 0 but that not seem to be working. How do I align the li items to the left of the row in css? Here is complete codepen. Looking at the image or running the code snippet you can see that there is a large space to the left of the displayed files. I am trying to achieve getting the displayed file names to float left to occupy that whitespace.

function getFileData() {
  var fileDiv = document.querySelector('#files');

  var files = Array.from(document.getElementById('attachments').files);

  fileDiv.innerHTML = '<ul>' + files.map(file => {
    return '<li>' + file.name + '</li>';
  }).join('') + '</ul>';


};

#files {
  display: flex;
  justify-content: left;
}

#files ul {
  list-style-type: none;
  float: left;
}

#files ul li {
  display: inline;
  float: left;
}

<label>Attachments</label>
<div>
  <input type="file" class="form-control input-lg" name="attachments" id="attachments" multiple onchange="getFileData()">
</div>
<div id="files"></div>

I already made you a snippet in the other question Why not copy it ???? — mplungjan, Nov 17 '20 at 11:35
Next time, In Chrome right-click the element and choose `inpect` then scroll down on the right and see it has padding of 40 px — mplungjan, Nov 17 '20 at 11:39

score 1 · Accepted Answer · answered Nov 17 '20 at 11:37

1

Just add padding-left: 0; to the #files ul.

#files ul {
  list-style-type: none;
  float: left;
  padding-left: 0;
}

answered Nov 17 '20 at 11:37

Aleksandar

460
3
13

score 0 · Answer 2 · answered Nov 17 '20 at 11:38

0

The ul element has some default styles set due to which it behaves like this. Try setting:

padding-inline-start: 0 ; //the original property responsible

OR simply:

padding-left: 0;

for #files ul {} styles. Both will work.

answered Nov 17 '20 at 11:38

Arslan Shahab

639
3
9

Trying to get rid of whitespace to left of ul element

2 Answers2