这是本文的后续内容 (www.stackoverflow.com/questions/1389029/two-divs-with-unknown-width-and-dynamic-scaling)。
这是图示要求 (/www.creativesplash.net/images/2.gif)。这是我到目前为止achieved 的内容。
在浏览器调整大小时应该会发生 2 件事：
编辑：原型解决方案会很棒！
提前感谢您的帮助！
瓦桑特
【问题讨论】：
标签： javascript html css
JavaScript？ Pshaw，我认为我们可以用简单的 CSS 来管理它，不是吗？
这是一个概念证明。当它适合一行时，它依赖于隐藏选项卡内容后面的第二个边框。完成样式并确保它与您选择的特定字体保持一致，留给不那么懒惰的人作为练习。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<title> tabs test </title>
<style type="text/css">
#nav { border-bottom: 1px solid silver; }
#prefs { float: right; padding: 0.7em 0; }
#tabs { float: left; padding: 0.5em 0; white-space: nowrap; }
#tabs a {
display:-moz-inline-stack; display:inline-block;
margin-right: 0.7em; padding: 0.3em 0;
width: 7em; text-align: center; background: silver;
}
#tabs a.selected {
position: relative; z-index: 2;
background: white; border-width: 1px; border-style: solid; border-color: black black white;
}
#content { clear: right; border-top: 1px solid silver; }
#content .wrap {
clear: left; position: relative; z-index: 1; top: -0.6em;
background: white; border: solid black 1px;
padding: 1em;
}
</style>
</head><body>
<div id="nav">
<a href="n1">Sample links</a> |
<a href="n2">blah</a>
</div>
<div id="prefs">
<a href="p1">Preference 1</a> | <a href="p1">Preference 2</a>
</div>
<div id="tabs">
<a href="t0" class="selected">Active Tab</a>
<a href="t1">Tab 1</a>
<a href="t2">Tab 2</a>
<a href="t3">Tab 3</a>
</div>
<div id="content"><div class="wrap">
Lorem ipsum dolor sit amet blah blah blah.
</div></div>
</body></html>
当它们不适合自己的屏幕时，这使用内联块来阻止标签换行。你可能想要也可能不想要，我不知道。如果不是，则将该行更改为简单的浮点数。
【讨论】：
我不只知道 css，但是在 javascript 中，您可以获得两个 ul 的宽度，将其与父级的宽度进行比较，如果更大，则在您的偏好 ul 中添加新样式，将其设置为 100 % 宽度并添加底部边框。
快速 jQuery / javascript 解决方案（未测试...）：
$(document).ready(function() {
$('.ArticleTabs').foreach(function(){
if ( ($(this).find('.Preferences').width() + $(this).find('.tabs').width()) > $(this).width() ) {
$(this).find('.tabs').addClass('underlined_class');
}
});
});
您需要在这部分 javascript 之前添加 jQuery。例如来自 Google（如果您不自己托管）：
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
【讨论】：
边框问题是因为 UL 上有背景。当 LI 换行时，您也会得到背景换行。
看来你想要这样的东西。
#Features_Row{
border-bottom:1px solid #D2E0C0;
padding-bottom:3px;
}
【讨论】：