如何在同一行上对齐两个元素html

Question

I have an example like this jsfiddle where I have a list of <a> element. Inside each <a> element I have a <span> and a <button> . What I would like to do is I want to align the button on the right, I do this by adding the class pull-right and it worked fine

<button class=" btt pull-right glyphicon glyphicon-chevron-right"></button>

, and I want to align the span and the button on the same line, but if I have a very long Name inside the span then the button is no longer on the same line with the span. How can I fix this problem?

Answer 1

Use position: absolute; in your styling and set the buttons right styling to 0 . This will place your button at an absolute position, according to your parental div .

.btt {
  position: absolute;
  right: 0;
}

Live example

Answer 2

You can set width and display property to the span elements like this:

.surveySummaryList a span {
      width: calc(100% - 40px);
      display: inline-block;
      word-break: break-all;
}

and add rule for your buttons width like this:

.btt{
    width: 30px;
}

I updated the FIDDLE

Answer 3

This is an issue I have faced a few times and usually what I do is decide the maximum length I will allow this value to be and then truncate after that with ellipsis.

It is up to you but I think this is a good choice to make as it is defensive coding to keep your display neat no matter what the value.

Here is an example CSS class you can add to your span:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}