iT邦幫忙

2

使用div做輸入框標題

javascript html css html5
rr8r8r8r8tw 2017-02-24 10:10:02 ‧ 7197 瀏覽

  • 分享至 

  • xImage

請問是否能純用div
達成UserName這個標題出現在輸入框的左邊呢?
還是說用form表單比較方便?

		<div id="main">
		<div>UserName</div>
	    <div style="margin-bottom:10px">	
		    <input id="UserName" type="text" style="width:100%;height:40px;padding:12px"></div>		
		<div>PassWord</div>
        <div style="margin-bottom:20px">
            <input id="PassWord"  type="password" style="width:100%;height:40px;padding:12px"></div>
		<div>
             <a href="#" style="padding:5px 0px;width:100%;" onClick="DemoLoginButton()">
                 <span style="font-size:14px;">Login</span>
             </a>
        </div>
	  </div>
fillano iT邦超人 1 級 ‧ 2017-02-24 10:39:02 檢舉
可以，但是你要改display。div預設的display是block，他會佔滿整行的寬度。你要用它來擺標題的話，需要把它改成inline-block。
rr8r8r8r8tw iT邦新手 5 級 ‧ 2017-02-24 12:03:46 檢舉
了解，謝謝您
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
pjchender
iT邦新手 3 級 ‧ 2017-03-03 09:42:34
最佳解答

加上 inline-block 就可以了，像這樣：

<style>
    #main div{
        display: inline-block;
    }
</style>
登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22212 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙