'List of element wit fixed size independent of content and icon on the right side

I'm really bad at css and I've been scratching my head all day tried to do something very simple. Google was not helpful (but maybe because I don't know even how to ask the question)

The problem is the following:

I need to show a list of urls and an icon to "delete" the url. But I can not make that the icon is in the same position, independent of the size of the url text. Big texts are no problem because I can remove the last characters (for example, making all urls at most 20 characters), but the problem is when the url is short, and the Delete Icon move to the left

This is how I need it

enter image description here

This is how it is showing now

enter image description here

Any clue of how I can show the icons aligned?

cssalignment


Solution 1:[1]

You can wrap your input and your icon in a div and position your cross as absolute.

.wrapper {
  position: relative;
  max-width: 260px;
  margin-bottom: 20px;
}
input {
  width: 100%;
  height: 26px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  filter: none;
  border: none;
  border-bottom: 1px solid #333333;
}
svg {
  position: absolute;
  right: -20px;
  width: 16px;
  height: 26px;
  fill: #ff5555;
}
<div class="wrapper">
  <input type="text" placeholder="Your name" name="name" value="aaa.com" required>
  <svg viewBox="0 0 32 32"><path d="M17.46 16.014l8.24-8.194a.99.99 0 0 0 0-1.414c-.394-.39-1.034-.39-1.428 0l-8.232 8.187-8.308-8.31a1.01 1.01 0 0 0-1.428 0c-.394.396-.394 1.037 0 1.432l8.302 8.303-8.332 8.286c-.394.39-.394 1.024 0 1.414s1.034.39 1.428 0l8.325-8.28 8.275 8.276a1.01 1.01 0 0 0 1.428 0c.394-.396.394-1.037 0-1.432l-8.27-8.27z"/></svg>
</div>
<div class="wrapper">
  <input type="text" placeholder="Your name" name="name" value="aabbccddee.com" required>
  <svg viewBox="0 0 32 32"><path d="M17.46 16.014l8.24-8.194a.99.99 0 0 0 0-1.414c-.394-.39-1.034-.39-1.428 0l-8.232 8.187-8.308-8.31a1.01 1.01 0 0 0-1.428 0c-.394.396-.394 1.037 0 1.432l8.302 8.303-8.332 8.286c-.394.39-.394 1.024 0 1.414s1.034.39 1.428 0l8.325-8.28 8.275 8.276a1.01 1.01 0 0 0 1.428 0c.394-.396.394-1.037 0-1.432l-8.27-8.27z"/></svg>
</div>

Solution 2:[2]

You could investigate CSS grid with two columns, the one with the cross being saying a fifth of the width of the one with the image addresses.

The reason for suggesting this is that if your image addresses get quite long for a narrow device they will automatically wrap to the next line and the crosses will stay above each other and not overwrite the long addresses.

.container {
  width: 10em;
  /* just for demo purposes */
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-gap: 1em;
  white-space: wrap;
  word-break: break-all;
}

.container>*:nth-child(even) {
  color: red;
}
<div class="container">
  <a href="#">ABC.jpg</a>
  <div>X</div>
  <a href="#">ABCDEFGHIJKLMNOP.jpg</a>
  <div>X</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Will
Solution 2 A Haworth

Related Questions