如何使用CSS - 優文庫

-5

顯示在一行按鈕和圖像這是我的JavaScript代碼：如何使用CSS

$('#needdiv').append('<img src="/images/Connect.png" id="connectimage">' + '</img>' 
     + '<input type="button" id="connect" value=connect >' + '</input>' 
     + '<img src="/images/Remove.png" id="removeimage" />' 
     + '<input type="button" id="remove" value="remove">'+'</input>');

在我的HTML頁面有：

<div id=needdiv></div>

這是CSS

#connectimage  
    {float:left;  
    vertical-align:left; 
    } 
    #connect 
    { text-decoration:none; 
    vertical-align:middle; 
    } 
    #removeimage 
    { 
    vertical-align:middle; 
    } 

    #remove 
    { 
    vertical-align:right; 
    }

如何在單行顯示此圖像和按鈕？我需要connect image在左邊，connect button和remove image在中間，remove button在右邊。但都在一條線上。

來源

2014-07-22 user3855674

嘗試使用html'

''table-layout：fixed'，以便您可以準確定義單元格的寬度。 – mechalynx

提供CSS和HTML + jsfiddle。 –

請正確指出您的問題，上傳您想要獲取的圖片？你的意思是「左側連接圖像，連接按鈕，中間移除圖像，右側移除按鈕」。什麼中間和左邊？ – SarathSprakash

回答

First you put one Div element for whole content set width as 100% 
and indise div for img tag 50% and Button 50% .It should work 


CSS: 

#needdiv 
{ 
width:100%; 
display:block; 
} 

#needdiv img 
{ 
float:left; 
} 
#needdiv input 
{ 
float:right; 
}

來源

2014-07-22 11:54:28 prakash

如果你想所有的構件用同樣的那面顯示的一面，你可以應用CSS樣式到所有的人，並使用float屬性（小提琴：http://jsfiddle.net/G2rRa/）：

#needdiv img, #needdiv input { 
    float: left; 
}

或者，你可以還可以使用display屬性（小提琴：http://jsfiddle.net/G2rRa/1/）：

#needdiv img, #needdiv input { 
    display: inline; 
}

您可以使用CSS margin屬性到元素之間調整間距：

#needdiv img, #needdiv input { 
    float: left; 
    margin: 0px 10px; 
}

來源

2014-07-22 11:53:27

相關問題