Question

我这里有一个jsfiddle - https://jsfiddle.net/1w5c1qq2/3/

我知道这很简单，但这让我很生气

我有一个div，其中包含一个带有链接的ul列表。

我需要将链接作为死点，我需要将链接之间的差距作为死点。

无论我做什么，链接总是稍微偏离。

有没有办法让他们死在中心。

在实际设计中，显而易见的是，页面以中心的颜色分割。

    <div class="block">
        <ul>
            <li><a href="#">Link One</a></li>

            <li><a href="#">Link Two</a></li>

        </ul>
    </div>

Answer 1

这是另一种做你想做的事情。在position: absolute;元素上使用left: 50%;，transform: translateX(-50%);和ul。

*{
    margin: 0;
    padding: 0;
}

.block{
    background: gray; 
    padding: 10px;
    height: 20px;
}

ul{
    list-style: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

li{
    text-align: center;
    display: inline-block;
}

a{
    background: white;
    padding: 5px;
}

<div class="block">
    <ul>
        <li><a href="#">Link One</a></li>
        
        <li><a href="#">Link Two</a></li>
        
    </ul>
</div>

<强>参考： https://css-tricks.com/centering-percentage-widthheight-elements/

Answer 2

对我来说似乎已经死了。它看起来像手柄＆＃39; （微小的标记）在jsFiddle中调整窗口的大小并不是居中的，所以也许这就是你认为它没有用的原因。

但是，它也可能是字体问题。如果链接中的文本没有相同的宽度，则链接本身也不会具有相同的宽度。在这种情况下，块是居中的，但它们之间的空间不会完全位于中间。要解决这个问题，请为链接提供相同的宽度。

如果您希望它们之间的空间居中，无论元素宽度如何，您都可以按以下方式执行此操作：

将li放在彼此旁边并给它们一个固定的宽度，以便它们可以正确定位。然后，您可以使用text-align left和right来对齐其中的链接。

在下面的示例中，我在ul上使用了浮点数和自我清算来执行此操作，但您也可以将display: inline-block用于li。

＆＃13;

*{
    margin: 0;
    padding: 0;
}

.block{
    background: gray; 
    padding: 10px ;
}

ul{
    text-align: left;
    list-style: none;
}
li{
    display: block;
    float: left;
    width: 50%;
}
/* Right-align the link in the left li. */
li:first-child {
  text-align: right;
}
/* Clear the floated li's */
ul::after {
    content: "";
    clear: both;
    display: block;
}

a {
    background: white;
    padding: 5px;
    margin: 0 5px;
    width: 110px;
}

＆＃13;

<div class="block">
    <ul>
        <li><a href="#">Link One</a></li>
        
        <li><a href="#">Link Two with a longer text.</a></li>
        
    </ul>
</div>

＆＃13;

Answer 3

以下是解决方案：https://jsfiddle.net/1w5c1qq2/8/。它归结为给每个盒子提供50％的可用宽度，并将这些盒子中的文本分别对齐到右侧和左侧。始终关注具有显示内联阻止框的隐式空格！

<div class="block">
    <ul>
        <li><a href="#">Link One</a></li><!--

     --><li><a href="#">Link Two is wider just for show</a></li>

    </ul>
</div>

和

*{
    margin: 0;
    padding: 0;
}

.block{
    background: gray; 
    padding: 10px ;
}

ul{
    list-style: none;
}

li{
    display: inline-block;
    box-sizing: border-box;
    width: 50%;
    text-align: right;
    padding-right: 3px;
}
li:last-of-type {
    text-align: left;
    padding-left: 3px;
}

a{
    background: white;
    padding: 5px;
}

CSS中心浮动链接

3 个答案: