如何将同一行的 2 个元素与第二个优先对齐？

Question

我想在同一行上对齐两个文本元素。第二个元素必须优先于第一个元素。我的意思是 first 元素（标题）如果太长可以剪掉，但是 second 一个(价格)一定要留满.

这就是我到目前为止所做的。它适用于 Chrome，不适用于 Firefox。

h3{
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 340px;
}

.price {
  padding-left: 15px;
  color: #1abc9c;
  background: yellow;
  float: right;
}

                <h3>
                  <span class="price">6 500 €</span>

                  <a class="title">Here is my long title, which is a very long one!</a>
                </h3>

这张图片显示了我想要得到的东西：

Answer 1

首先是演示 link http://jsfiddle.net/9g40gh0q/1/

我所做的是，将容器 (h3) 设置为设定宽度 (340px) 然后我假设你想为价格保留 25% 的宽度，即 85px 和标题到 h3 的 75%。

在 IE、FF 和 Chrome 中工作正常。

HTML

<h3>
    <a class="title">Here is my long title, which is a very long one!</a>
    <span class="price">6 500 €</span>
</h3>

CSS

    h3 {
    width: 340px;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  
    clear: both;
}
h3 .title{
    float: left;
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}
h3 .price {
    float: right;
    background: yellow;
}

Answer 2

确保您的 HTML 包括 <!DOCTYPE html> <html> <head>

这可能会导致 firefox 无法阅读您的作品

Answer 3

  h3{
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 340px;
  
    }

.price {
  
     //padding-left: 15px;
     color: #1abc9c;
     background: yellow;
     float: right;

    }

                <h3>
                  <span class="price">6 500 €</span>

                  <a class="title">Here is my long title, which is a very long one!</a>
</h3>

如何将同一行的 2 个元素与第二个优先对齐？

How to align 2 elements on the same line with the second one on priority?

css

alignment