相关疑难解决方法(0)

你在HTML中的菜单栏上找到了很多教程,但是对于这个特定的(虽然是IMHO泛型)案例,我还没有找到任何合适的解决方案:

#  THE MENU ITEMS    SHOULD BE    JUSTIFIED     JUST AS    PLAIN TEXT     WOULD BE  #
#  ^                                                                             ^  #

• 有不同数量的纯文本菜单项,页面布局流畅.
• 第一个菜单项应左对齐,最后一个菜单项应右对齐.
• 其余项目应在菜单栏上以最佳方式传播.
• 数量是变化的,因此没有机会预先计算最佳宽度.

请注意,TABLE也不适用于此:

• 如果您居中所有TD,则第一个和最后一个项目未正确对齐.
• 如果你左对齐并右对齐第一个resp.最后的项目,间距将是次优的.

使用HTML和CSS以干净的方式实现这一点并不是很奇怪吗？

我有一个水平导航栏,如下所示:

<ul id = "Navigation">
    <li><a href = "About.html">About</a></li>
    <li><a href = "Contact.html">Contact</a></li>
    <!-- ... -->
</ul>

我使用CSS删除子弹点并使其水平.

#Navigation li
{
    list-style-type: none;
    display: inline;
}

我试图证明文本的合理性,以便每个链接均匀分布以填满整个ul空间.我尝试添加text: justify到选择器li和ul选择器,但它们仍然是左对齐的.

#Navigation
{
    text-align: justify;
}

#Navigation li
{
    list-style-type: none;
    display: inline;
    text-align: justify;
}

这很奇怪,因为如果我使用text-align: right它,它的行为与预期的一样.

如何均匀分布链接？

我想要一个h2元素,并跨越它的div的宽度跨越它的文本.

text-align:justify;

只有传播文本,如果它的宽度比它的容器的宽度......有点像Photoshop的理由左

有没有办法制作流畅的布局,如果浮动元素不适合,它会移动到下一行的左边？这是我想要实现的目标的图片:

如果绿色元素和右元素都有空间,则红色元素会浮动到右侧.

如果没有足够的空间(绿色元素很长,或者屏幕太小),红色元素应该包裹并将其自身对齐到左侧.

这就是我现在所拥有的:小提琴

如您所见,绿色元素在包装后保持与右侧对齐.

码:

<div class="wrap">
    <div class="red">long long long long text</div>
    <div class="green">needs to align to the left</div>
</div>

.red {
    display: inline-block;
    border-color: red;
}
.green {
    float: right;
    width: 80px;
    border-color: green;
}

好的,所以情况就是这样......

假设我有一个网站导航栏,我允许用户在此导航栏上更改他们想要的链接数量.这意味着他们可以有3个,5个,10个等.

我想要做的是,如果一个链接启动,它只占用导航栏上1/5的空间.如果我没有使用边框,我可能会这样做:

宽度:18%; 填充:0 1%;

但是,我有两个问题:

1)对于4个按钮,它没有填满整行.如果链接太宽,它看起来会很难看......但是当我有6个或7个按钮时,它会有巨大的溢出!2)由于我有边框,我不能使用边框或宽度的百分比值,因为我无法正确估计它的百分比.

现在,我知道我不必使用百分比值,但我理想的是第一个按钮是所有其他按钮正确适合所需的最小尺寸,这意味着如果我有950px和6个链接,第一个链接可以是大约150px而其他链接是160px ......这很好.我希望导航栏上的所有其他按钮大小相同,无论有多少链接.

我还需要它接受边框...我想这样做的方法是在嵌套div中放置一个边框,这样它不会影响按钮的整体宽度？这一切都很好,但我仍然受到无法使用我想要的风格设计动态网站的问题的困扰,如果我无法使所有的导航按钮适合宽度.

我可以使用一些js技巧吗？我甚至都不知道......

谢谢

编辑:这是我的演示小提琴