相关疑难解决方法(0)

现在我有一个看起来像这样的导航栏:http: //bootply.com/78239

我想最大化"搜索"文本输入的宽度,而不创建换行符(即"清除"链接将与"关于"链接紧密).

我只有css和网页设计的基本经验.我读了一些关于" overflow: hidden"技巧的内容,但是当目标元素右侧有更多元素时,我不明白如何使用它.

谢谢

编辑:

部分解决方案可以是为每种情况"手动"设置宽度,例如http://bootply.com/78247:

@media (max-width: 767px) {
  #searchbar > .navbar-form {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #searchbar > .navbar-form {
    width: 205px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #searchbar > .navbar-form {
    width: 425px;
  }
}

@media (min-width: 1200px) {
  #searchbar > .navbar-form {
    width: 625px;
  }
}

但是当菜单的文本是"动态的"时(例如,包含"Hello username"),此解决方案将不起作用.

我想如果你假设菜单文本的宽度有限制,这不是一个大问题 - 手动计算/测试这些宽度真的很烦人.我只是想知道是否有一种简洁的方法可以自动完成.