Question

我希望将image标记和p span标记彼此相邻。而且我不想把它们放在两个不同的div中来跟随网格系统，因为它没有给我正确的最终输出。

以下是我要纠正的一小段代码：FIDDLE

<div class="row">
    <div>
        <div class="col-md-9 col-md-offset-3" style="padding-right:0px">
            <img src="Images/signin_logo.jpg" width="150" height="110" />
            <p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
                <br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>

            </p>
        </div>
    </div>
</div>

FIDDLE

我希望图片标记旁边有<p>标记。

Answer 1

应用此css -

img, p {
    display:inline-block;
}

只要两个元素的宽度都没有超过容器的宽度，这将使img和p标签彼此相邻。

Answer 2

两个选项

＆＃13;

.row p {
    display: inline-block;
}

＆＃13;

<div class="row">
    <div>
        <div class="col-md-9 col-md-offset-3" style="padding-right:0px">
            <img src="Images/signin_logo.jpg" width="150" height="110" />
            <p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
                <br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>

            </p>
        </div>
    </div>
</div>

＆＃13;

或

＆＃13;

.row img {
  float: left;
}

＆＃13;

<div class="row">
    <div>
        <div class="col-md-9 col-md-offset-3" style="padding-right:0px">
            <img src="Images/signin_logo.jpg" width="150" height="110" />
            <p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
                <br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>

            </p>
        </div>
    </div>
</div>

＆＃13;

堆栈图像和span标签彼此相邻 - bootstrap

2 个答案: