CSS

2014-07-22 1 views
-5

를 사용하여 한 줄에 버튼과 이미지를 표시하는 방법이 내 자바 스크립트 코드CSS

<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 buttonremove image, 오른쪽에 remove button이 필요합니다. 그러나 모두 한 줄에. 당신이 수,

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

또는 : 당신이 그런 나란히 표시 할 모든 요소를 ​​원한다면

+0

'table-layout : fixed'와 함께 html '

'을 사용하여 정확하게 셀의 너비를 정의 할 수 있습니다. – mechalynx

+0

CSS와 HTML +를 제공하십시오. –

+0

문제를 올바르게 지정하고 획득하고자하는 것을 업로드하십시오. "왼쪽에 이미지를 연결하고, 단추를 연결하고 중간에 이미지를 제거하고, 오른쪽에있는 단추를 제거"하는 것을 의미합니다. 무엇의 중간과 왼쪽? – SarathSprakash

답변

0
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; 
} 
0

, 당신은 그들 모두에 CSS 스타일을 적용하고 플로트 속성 (바이올린 : http://jsfiddle.net/G2rRa/)를 사용할 수 있습니다 또한 디스플레이 속성을 사용 (바이올린 : http://jsfiddle.net/G2rRa/1/) :

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

당신은 당신의 요소 사이의 간격을 조정하기 위해 CSS 여백 속성을 사용할 수 있습니다 :

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