将按钮放在div的右侧

时间:2013-04-15 07:13:09

标签: css css3

我有一个div和一个按钮,我想把它们放在一起。问题是,无论我做什么,我的按钮最终都在下一行。

小提琴:http://jsfiddle.net/xhEG6/

<div id="askQuestionOverDiv" "><h1>Text</h1></div>     

<input type="button" id="Text" style="float:right;" value="Text" />

#askQuestionOverDiv {

     height:40px; 

width: 70%;   
     text-align:center;
     border-radius:15px;
      background: #141414;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
    background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
    background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
    background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
    background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
    background: linear-gradient(to bottom, #32323a 0%, #141414 100%);

}

  #askQuestionOverDiv h1 {

        color:white;

    }


        #askQuestionOverDiv h1:hover {

       text-decoration:underline;
       cursor:pointer;

    }

2 个答案:

答案 0 :(得分:3)

将html 向上更改为向下,如下所示

<input type="button" id="Text" style="float:right;" value="Text" />

<div id="askQuestionOverDiv" "><h1>Text</h1></div>    

<强> Live Demo

答案 1 :(得分:1)

您可以使用 display:inline-block 。并且还可以尝试 float 属性。