如何将 div 中的文本放置在图像旁边？答案

【问题标题】：how i can position the text inside div make next to image?如何将 div 中的文本放置在图像旁边？
【发布时间】：2019-11-02 12:38:07
【问题描述】：

我正在尝试构建 Ebay 注册表单。在顶部，我想将登录文本移到 Ebay pic 旁边的右侧尝试了 float 和 text-align 都没有工作

HTML

<div class="top1">
  <img src="pic/eb.png"/>
  <P id="sigin">Already a member?<a href="https://signin.ebay.com">Sign in</a></P>
</div>

CSS

.top1{
  height: 25%;
  width: 100;
}

#sigin{
  float:right;
  text-align: right;
  font-weight:bold;
  font-size:18px;
}

【问题讨论】：

最好的方法是使用 CSS 中的 flexbox 工具。做一些阅读，你将成为一名 CSS 大师，不再需要依赖位置和浮动。

标签： html css frontend

【解决方案1】：

使用弹性盒

刚刚测试过，效果很好。

<!DOCTYPE html>

<html>

    <div class="top1">
        <img src="pic/eb.png"/>
        <P id="sigin">Already a member?<a href="https://signin.ebay.com">Sign in</a></P>
    </div>




      <style>
        .top1{
            display: flex;
            flex-direction: row;
            height: 25%;
            width: 100;
        }

        #sigin{
            text-align: right;
            font-weight:bold;
            font-size:18px;
        }
      </style>
</html>

【讨论】：

【解决方案2】：

因为它是一个浮动的权利，所以登录标签应该放在图像之前。哦，请用<p>代替<P>

【讨论】：

【解决方案3】：

这样试试

<div class="top1">
 <img src="pic/eb.png"/>
 <p id="sigin">Already a member?
  <a href="https://signin.ebay.com">Sign in</a>
 </p>
</div>

CSS：

.top1 {
  height: 25%;
  width: 100;
  display: flex;
}

#sigin {
 margin-right: 10px;
}

【讨论】：

【解决方案4】：

尝试使用位置：

.top1 {
  position: relative;
 }

#sigin {
 margin-right: 10px;
  position: absolute;
  left: 20px;
  top: 4px;
}

【讨论】：

【解决方案5】：

嗨 Kaslan 使用这个希望这对你有用

.top1{
        display:inline;
         height: 25%;
        width: 100%;
}
img{
  display: inherit;

}

p {
  display: inherit;
  text-align:right;
}
#sigin{

  text-align: right;
  font-weight:bold;
  font-size:18px;
}

HTML 将保持不变

 <div class="top1">
  <img src="pic/eb.png"/>
  <P id="sigin">Already a member?<a href="https://signin.ebay.com">Sign in</a></P>
</div>

【讨论】：

【解决方案6】：

创建一个ul 并像一行一样工作并在其中设置元素并将float:left 设置为它。下面的sn-p 工作正常，但我没有图像src 这就是为什么logo 是空的，它可以在您的设备上正常运行。

ul{
  list-style-type:none;
}
ul li{
float:left;
}
.top1{
  height: 25%;
  width: 100;
}

<ul>
  <li class='top1'><img src="pic/eb.png"/></li> 
  <li><P id="sigin">Already a member?
<a href="https://signin.ebay.com">Sign in</a></P></li>
</ul>

【讨论】：