Question

我想在同一行上对齐两个文本元素。第二个元素必须优先于第一个元素。我的意思是第一个元素（标题）可以削减如果太长，但第二个一个（价格）必须保持全

这是我迄今为止所做的。它在Chrome上工作，而不是在Firefox上工作。

＆＃13;

h3{
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 340px;
}

.price {
  padding-left: 15px;
  color: #1abc9c;
  background: yellow;
  float: right;
}

＆＃13;

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

＆＃13;

此图显示了我想要的内容：

Answer 1

首先是演示链接 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个元素与第二个元素对齐优先级？

3 个答案: