我怎樣才能 position div 內的文本在圖像旁邊制作？
[英]how i can position the text inside div make next to image?
問題描述
我正在嘗試構建 Ebay 注冊表單。 最重要的是，我想將登錄文本移到 Ebay pic 旁邊的右側，嘗試了浮動和文本對齊，但沒有一個是有效的
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;
}
6 個解決方案
解決方案1
1 2019-11-02 12:44:18
因為它是一個浮動的權利，所以登錄標簽應該放在圖像之前。 哦，請使用<p>而不是<P>
解決方案2
1 2019-11-02 12:49:00
像這樣試試
<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;
}
解決方案3
1 2019-11-02 13:18:22
嘗試使用 Position：
.top1 {
position: relative;
}
#sigin {
margin-right: 10px;
position: absolute;
left: 20px;
top: 4px;
}
解決方案4
1 已采納 2019-11-02 13:46:53
使用 flexbox
剛剛對此進行了測試，並且效果很好。
<!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>
解決方案5
1 2019-11-02 13:59:12
嗨 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
0 2019-11-02 12:46:27
創建一個ul並像一行一樣工作並在其中設置元素並將float:left設置為它。下面的代碼片段工作正常，但我沒有圖像 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>
如何在div內水平和垂直居中放置圖像和文本？
[英]How can I center an image and text horizontally and vertically inside a div?
我在div內有5張圖像，如何移動單擊的圖像的位置，使其移動成為div內的第一張圖像？
[英]I have 5 images inside a div, and how can i move the position of a clicked image so that it moves to become the very first image inside the div?
當圖像寬於div時，如何使圖像適合div元素？
[英]How can I make an image fit inside a div element when the image is wider than the div?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.