2

When I apply 'float: right', the vertical alignment of the nearby text no longer aligns properly with the element aside it (only the horizontal alignment continues to work). I am relatively new to web development so I understand this is probably a simple question. This is what it currently looks like.

HTML:

<body>
<ul>
    <li><span>Some Text Some Text Some Text</span><span>X</span></li>
    <li><span>Some Text Some Text Some Text</span><span>X</span></li>
    <li><span>Some Text Some Text Some Text</span><span>X</span></li>
    <li><span>Some Text Some Text Some Text</span><span>X</span></li>
</ul>

CSS:

* {
    font-size: 25px;
    text-align: center;
}

ul {
    list-style-type: none;
}

li {
    background-color: green;
    color: white;
    margin: 0;
    height: auto;
    overflow: hidden;
}

li span:nth-child(2) {
    display: inline-block;
    color: white;
    float: right;
    background-color: black;
    padding: 15px;
}

As you can see from the code above, the alignment of the text is not centered vertically with the element to the right-hand side (the black 'X'). I would really appreciate it if someone could help me fix this problem and also explain why this issue is being caused for future reference. Thanks :)

SirJimiee
  • 31
  • 5

2 Answers2

1

Your X has a padding while your text does not. You can provide the same padding from your X and add display: inline-block; to the text.

* {
  font-size: 25px;
  text-align: center;
}

ul {
  list-style-type: none;
}

li {
  background-color: green;
  color: white;
  margin: 0;
  height: auto;
  overflow: hidden;
}

li span:first-child {
  display: inline-block;
  padding: 15px;
}

li span:nth-child(2) {
  display: inline-block;
  color: white;
  float: right;
  background-color: black;
  padding: 15px;
}
<ul>
  <li><span>Some Text Some Text Some Text</span><span>X</span></li>
  <li><span>Some Text Some Text Some Text</span><span>X</span></li>
  <li><span>Some Text Some Text Some Text</span><span>X</span></li>
  <li><span>Some Text Some Text Some Text</span><span>X</span></li>
</ul>
nash11
  • 8,220
  • 3
  • 19
  • 55
0

An element that is floated is automatically display: block;

You can read this article to know more about css float.

Carlos GR
  • 23
  • 6