Question

这是我的代码：

HTML：

  <div id="ip">
                <address>
                    <strong> Mblahblah: </strong>
                    <pre> xx.xxxx.xxx.xxxx. </pre>
                </address>
                 <address>
                    <strong> blah: </strong>
                    <pre> xxx.xxxx.xxxxx </pre>
                </address>  
            </div><!-- #ip -->

screenshot

在firefox中，在我将预显示设置为内联之后，它可以实现我想要的功能。两者都彼此相邻。但在Chrome中，却没有。标题（strong）中的内容...位于地址上方的新行上。我做错了什么？

CSS：

#ip { 
    border-left: 1px solid #b9b9b9;
    float: right; 
    margin: -6px 0 15px 0;
    padding: 0 0 0 93px;

 }

pre, code { 
    background: #444;
    color: #fff;
    font-family: Consolas, Courier New, Monospace;
}

#ip address {
    margin: 22px 0;
}

#ip address strong, #ip address pre {
    display: inline;
    padding: 2px 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#ip address pre { float: right;}
#ip address strong { font-weight: bold; font-size: 20px; }

第一个答案没有用。在Firefox中，但不在Chrome中....是否有其他解决方案我可以使用？下面是所有的css thhats标题的一部分。

header, .content-wrap, #main-content, nav {
    width: 960px;
    margin: 0px auto;
}

#logo { float: left; }

#ip {
    border-left: 1px solid #b9b9b9;
    float: right;
    margin: -6px 0 15px 0;
    padding: 0 0 0 93px;

 }

pre, code {
    background: #444;
    color: #fff;
    font-family: Consolas, Courier New, Monospace;
}

#ip address {
    margin: 22px 0;
    clear: both;
}

#ip address strong, #ip address pre {    
    padding: 2px 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#ip address pre { float: right;}
#ip address strong { float: left; font-weight: bold; font-size: 20px; }
nav {
    background: #49434a url(../images/nav-bg.jpg) repeat;
    height: 40px;
    margin: 30px 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7);
    -moz-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7);
    border: 1px solid #000;
}

nav ul {
    padding: 8px 20px;
}

nav ul li {
    display: inline;
    padding: 12px 25px;
}

nav ul li a {
    color: #fff;
    font-size: 19px;
    text-shadow: -1px 1px 0 #000;
}

Chrome之前从未给我带来任何问题。

Answer 1

我希望这就是你要找的东西。看看我在JsFiddle上对你的代码做了什么：http://jsfiddle.net/Lpb8E/。

基本上，您需要做的就是将地址和前置元素设置为float: left;。

Answer 2

此解决方案类似于GGCO，但它保留了在Firefox中正确显示的相同布局，而不是将预标记与强标记对接。它还尊重地址标签上的边距设置。

http://jsfiddle.net/aQNFQ/

在chrome中，内联元素不会内联

2 个答案: