Question 220005 in Html Question posted in
Some basic documentation can be found here.

Html – why two inline-block elements are in the separate line while they should be in same line?

I have two a tags and I set their displays to inline-block while I expect them to be on the same line but they are on the different lines, so this is happening?

code:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
 <a href="" style="display:inline-block">Lorem ipsum, dolor sit amet consectetur adipisicing 
 elit. Magnam, quam.
    Inventore nihil, quod eos
    porro neque sed ducimus ipsam soluta maiores et maxime harum dolorum unde culpa cupiditate 
 sapiente quia
    quaerat omnis laboriosam, doloribus est.</a>
<a href="" style="display:inline-block">Lorem ipsum, dolor sit amet consectetur adipisicing 
elit. Magnam, quam.
    Inventore nihil, quod eos
    porro neque sed ducimus ipsam soluta maiores et maxime harum dolorum unde culpa cupiditate 
sapiente quia
    quaerat omnis laboriosam, doloribus est.</a>
</body>

</html>

output:

enter image description here

expected output:

enter image description here

Tags:

2

Answers


  1. 0

    For Getting Expected Output You should remove the

    display:inline-block

    from both anchor tags and then apply

    display:flex

    on body tag this will make both anchor tag in the same line.

    You can also get the expected output by only removing this display:inline-block property.

    Login or Signup to reply.
  2. 0

    The width of an inline-block is determined by its width property which (in this case) is the default for a elements: auto.

    For an inline-block, auto means it is as wide as it needs to be to hold its content unless constrained by its container.

    Each element has a lot of text in it, so it is as wide as its container; consequently the second element word wraps to the next line.

    If you want to lay out elements in a row, look to Flexbox or Grids instead.

    .container {
  display: flex;
}
    <div class="container">

  <a>Lorem ipsum, dolor sit amet consectetur adipisicing 
 elit. Magnam, quam.
    Inventore nihil, quod eos
    porro neque sed ducimus ipsam soluta maiores et maxime harum dolorum unde culpa cupiditate 
 sapiente quia
    quaerat omnis laboriosam, doloribus est.</a>
  <a>Lorem ipsum, dolor sit amet consectetur adipisicing 
elit. Magnam, quam.
    Inventore nihil, quod eos
    porro neque sed ducimus ipsam soluta maiores et maxime harum dolorum unde culpa cupiditate 
sapiente quia
    quaerat omnis laboriosam, doloribus est.</a>

</div>

    If you want to have the sentences run on from each other (which I think your low resolution picture is trying to express) then you want display: inline (the default). Where the individual fragments will wrap independently of the entire element.

    <div class="container">

  <a>Lorem ipsum, dolor sit amet consectetur adipisicing 
 elit. Magnam, quam.
    Inventore nihil, quod eos
    porro neque sed ducimus ipsam soluta maiores et maxime harum dolorum unde culpa cupiditate 
 sapiente quia
    quaerat omnis laboriosam, doloribus est.</a>
  <a>Lorem ipsum, dolor sit amet consectetur adipisicing 
elit. Magnam, quam.
    Inventore nihil, quod eos
    porro neque sed ducimus ipsam soluta maiores et maxime harum dolorum unde culpa cupiditate 
sapiente quia
    quaerat omnis laboriosam, doloribus est.</a>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search