Question

我想做什么： 我试图将一些文本（区域名称）居中。本文将有3种不同的配置：

文字和浮动右箭头
浮动左箭头文字和浮动右箭头
浮动左箭头和文字

如果箭头没有下一个或上一个区域，这些箭头将转到下一个区域或上一个区域，但文本仍显示当前区域名称。

问题： 当箭头消失或显示其中心相应移位时，此文本不会保持居中

我尝试了很多不同的方法来实现这一点，所有这些方法都失败了，这似乎是一个简单的问题，但我无法弄明白。

以下是我在JSfiddle中尝试的一些测试： 链接：http://jsfiddle.net/5vTE5/

<ul style="text-align: center; list-style:none;">
    <li style="float:left; display:inline">
        Left float
    </li>
        <li style="display:inline;">
        Centered
    </li>
        <li style="float:right; display:inline">
        Right
    </li>
</ul>
<br/>

<div style="text-align: center;">
<span style="float: left;">Left text</span>
<span style="text-align: center;">Centered Text</span>
<span style="float: right;">Right Text</span>
</div>
<!--Right is gone-->
<div style="text-align: center;">
<span style="float: left;">Left text</span>
<span style="text-align: center;">Centered Text</span>
</div>

<!--left is gone-->

<div style="text-align: center;">
<span style="text-align: center;">Centered Text</span>
<span style="float: right;">Right Text</span>
</div>

<br/>
<!--This text is centered to the size of the window, or its parent-->
<div style="text-align: center;">Centered Text</div>

图片： Floating left arrow and text Floating left arrow text and floating right arrow Text and a floating right arrow

图像很窄，所以我也将它们上传到imgur，使它们更加明显： http://imgur.com/a/WsC7V

目前我正在以列表形式进行此操作。

谢谢，

凯文

Answer 1

您可以将结构保留在不显示右侧，左侧元素的页面中。示例http://jsfiddle.net/CtKgr/2/ CSS

li
{
    width:33%;
    border:1px solid red;
    list-style-type: none;
    display:inline-block;
    width:33%;
    float:left;
    height:50px;
    line-height:50px;
}

.center
{
    text-align:center;   
}

.right
{
    text-align:right;   
}

HTML

<ul>
    <li>
        Left
    </li>
    <li class="center">
        Centered
    </li>
    <li class="right">
        Right
    </li>
</ul>

<ul>
    <li>
    </li>
    <li class="center">
        Centered
    </li>
    <li class="right">
        Right
    </li>
</ul>


<ul>
    <li>
        Left float
    </li>
    <li class="center">
        Centered
    </li>
    <li class="right">

    </li>
</ul>

Answer 2

您没有正确使用float。这是一个常见的误解，也是我在学习float并结合其他CSS属性时必须学习的最难的事情之一。

Float，as described by W3Schools告诉内联元素尽可能向左或向右移动。因此，如果你愿意的话，你可以将一些物品和一些物品漂浮在一起，但这意味着每件物品都会尽量向左或向右移动。

除此之外，float实际上并不能很好地与内联列表一起使用。相反，请关注this SO example并完全删除浮动。如果您希望每个项目向左或向右浮动，则应考虑为每个内联列表项设置静态宽度，并在适当的位置分配text-align: left，text-align: center和text-align:right。

将菜单居中，某些项目可能会消失

2 个答案: