1

I have a group of elements of fixed width. Each element has a title and a varying number of child (each child is approximately one line of text). The number of column vary. At the moment I make lines of the element and I center according to the element having the most child. See below: enter image description here

I feel like the way I place them can lead to some weird spacing (mostly visible in the 3rd line) when the number of child is different from an element to another. I also tried just stacking them up to eliminate any space, but the titles were not aligned and that felt a bit weird.

Do you see any way I could display those elements better? Displaying in column was more convenient but is not mandatory.

Improve this question
2
  • What's the purpose of this? It looks like a quick reference for keyboard short-cuts...
    – DarrylGodden
    Jan 9, 2017 at 15:20
  • It's a soundboard. User can activate the sound either by using the shortcut in front of the line or by clicking on the line.
    – Py.
    Jan 9, 2017 at 15:27

1 Answer 1

Reset to default
4

Try to align each field to the top left. If there are no lines, the title aligned also to the left helps understand to which elements it refers. Leave some space below the title and the elements and even more between the fields.

If you use lines as borders for each field, then you can leave the title center aligned.

In this last image without more context I'm not sure if "Les fables de La Fontaine" should go on the left field, or if there should be those empty fields on its side. I hope this could help.

Improve this answer
3
  • 1
    This is it. He could also make the title a bit different, but even without that, this solution works
    – Devin
    Jan 9, 2017 at 16:15
  • Great, thanks for the input (i'll wait a bit more before accepting). Side question: do you advise to let some space on the right/left of the screen or try to occupy all the space in it?
    – Py.
    Jan 9, 2017 at 16:33
  • @Py. Use width:100% and a fixed max-width, 900px for example, also add some padding/margin around the table.
    – Alvaro
    Jan 9, 2017 at 16:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.