Question

HTML

<div id="container">
    <div>
        <span>Visit website</span>
        <span>View project</span>
    </div>
</div>

CSS

#container {
    width: 100%;
    padding:0;
    background-color: green;
}

div { padding: 0 20px; width: 0px; background:red;overflow:visible;  text-align: center;}

span {
    background:#222;
    color:#fff;
    display:inline-block;

    margin:10px 10px 0 0;
    padding:5px 10px
}

演示： http://jsfiddle.net/cePe3/445/

如何使2跨度在容器DIV的中间彼此内联！

注意：代码结构必须是它的。

谢谢

Answer 1

您可以使用更现代的解决方案：flexbox

将display: flex; justify-content: center;添加到 #container 和 #container div 。这很神奇。

工作小提琴：http://jsfiddle.net/cePe3/448/

Answer 2

您必须将div宽度设置为自动

div { padding: 0 20px; width: auto; background:red;overflow:visible;  text-align: center;}

https://jsfiddle.net/cePe3/446/

Answer 3

您必须为内联范围设置div宽度

div 
{ padding: 0 20px; 
  width: 350px;
  background:red;
  overflow:visible; 
  text-align: center;
}

DEMO

Answer 4

使跨度的位置绝对，然后添加jquery以使跨度居中，即使在调整窗口大小时：

＆＃13;

$( window ).resize(function() {
    shuffle();
});

function shuffle() {
    $('span').each(function(){
        $(this).css('left',($('#container').width()-$(this).width()) / 2);
    });
    $('#container').find('div').css('height',$('span:first').height()*6);
}

shuffle();

＆＃13;

#container {
    width: 100%;
    padding:0;
    background-color: green;
}

div { padding: 0 20px; width: 0px; background:red;overflow:visible;  text-align: center;}

span {
    position: absolute;
    background:#222;
    color:#fff;
    display:inline-block;

    margin:10px 10px 0 0;
    padding:5px 10px
}

span:nth-child(2) {
    top: 60px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div>
        <span>Visit website</span>
        <span>View project</span>
    </div>
</div>

＆＃13;

内联2跨越div

4 个答案: