Question 45554 in CSS Question posted in
Some basic documentation can be found here.

Make two elements to have the same width with CSS

I have two elements (a paragraph and a img) inside a link element and i want the paragraph to be the same width as the img, i tried doing display: inline-block; and a couple other things but cant seem to get it to work. can anyone help?

<li>
    <a href="https://store.steampowered.com/app/4000/Garrys_Mod/" target="_blank" >
        <img src="/Photos/garrysmod.jpg">
        <p>Garrys Mod is a physics sandbox game in which you can do allmost anything you want, including playing hide and seek, fighting monster, fighting eachother, escape from jail, and much more</p>
    </a>
</li>
Tags:

2

Answers


  1. 0

    Edited/changed after comment (the question wasn’t clear about this):

    Apply display: flex and flex-direction: column; to the link, plus an optional width setting to the parent container (ul), and (also optionally) text-align: justify to the p tag to make the text align also to the right border:

    ul {
  list-style-type: none;
  width: 400px; /* any value here, or no value to fill the horizontally available space  */
}

li a {
  display: flex;
  flex-direction: column;
}

li a p {
  text-align: justify;
}
    <ul>
  <li>
    <a href="https://store.steampowered.com/app/4000/Garrys_Mod/" target="_blank">
      <img src="/Photos/garrysmod.jpg">
      <p>Garrys Mod is a physics sandbox game in which you can do allmost anything you want, including playing hide and seek, fighting monster, fighting eachother, escape from jail, and much more</p>
    </a>
  </li>
</ul>
    Login or Signup to reply.
  2. 0

    I have given you an example below to learn from.

    You should look into flex. It’s just an easy way to control content. There is no actual purpose for it here, but I still gave the link container the flex property, because you would probably want to align the content later (e.g. align-items: center).

    Read up on flexbox, good luck!

    .link {
  display: flex;
}

.link img {
  width: 50%;
}

.link p {
  width: 50%;
}
        <div>
        <a class="link" href="https://store.steampowered.com/app/4000/Garrys_Mod/" target="_blank" >
            <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/4000/ss_ff27d52a103d1685e4981673c4f700b860cb23de.600x338.jpg?t=1663621793">
            <p>Garrys Mod is a physics sandbox game in which you can do allmost anything you want, including playing hide and seek, fighting monster, fighting eachother, escape from jail, and much more</p>
        </a>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search