准確定位懸停在畫布元素上的文本字段
[英]Accurately position text fields hovering over canvas elements
問題描述
我有兩個並排的畫布（以及一些“隱藏的”畫布）（我希望並排保持這種方式）。 當用戶縮小瀏覽器窗口時，我正試圖找到一種方法讓它們保持居中，而不是換行。 但是有一個問題：我還想通過文本字段和下拉菜單選擇來收集用戶信息。 文本字段和菜單選擇需要看起來像是畫布環境的一部分。 我希望它們完全懸停......精確地......在畫布上看起來像是畫布藝術的一部分。 但是，保持畫布居中並將相對和絕對位置應用於文本字段和菜單已被證明是棘手的。 我嘗試了一個“父母”DIV並讓其他DIV成為絕對的父母...但我得到了意想不到的結果。 如果它有助於使定位更容易，我可以讓畫布向左沖洗。 見代碼。
#centerAll { margin-left:auto; margin-right:auto; width:1300px; } div.theParent { position: relative; } div.absolute1 { position: absolute; top: 70px; left: 0; width: 90px; height: 20px; } div.absolute2 { position: absolute; top: 120px; left: 0; width: 90px; height: 20px; } div.absolute3 { position: absolute; top: 120px; left: 200; width: 90px; height: 20px; } body{ background-repeat: no-repeat; background-position: left; }
<script type="text/javascript" src="javascriptFile.js"></script> <div class="parent"> <div class="absolute1"> <input type="text" id="letteringText" value="one line of text"> </div> <div class="absolute2"> <select id="select something"> <option value="option 1">option1</option> <option value="option 2">option2</option> <option value="option 3">option3</option> </select> </div> <div class="absolute3"> <select id="select some more"> <option value="option 1">option1</option> <option value="option 2">option2</option> <option value="option 3">option3</option> </select> </div> </div> <div id="centerAll"> <canvas id="TheLeftSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas> <canvas id="TheRightSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas> <canvas id="SomeHiddenCanvas" width="300" height="300" style="display:none;"></canvas> <canvas id="AnotherHiddencanvas" width="300" height="300" style="display:none;"></canvas> </div>
1 個解決方案
解決方案1
0 已采納 2019-03-24 15:50:04
您的父div與畫布容器（ #centerAll ）的寬度不匹配。 我將父div設為絕對值，並使寬度等於畫布容器。 然后浮動絕對div並使用text-align屬性根據canvas元素將輸入元素向左或向右居中。
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> #centerAll { margin-left:auto; margin-right:auto; width:1300px; text-align: center; } div.parent { position: absolute; width:1300px; } div.parent:after { content: ''; display:block; clear:both; } div.absolute1, div.absolute2, div.absolute3 { width: 50%; float: left; box-sizing: border-box; text-align: right; padding-top: 20px; padding: 20px; } div.absolute2 { text-align: left; } div.absolute3 { text-align: right; padding-left: 50px; } body{ background-repeat: no-repeat; background-position: left;} </style> </head> <body> <div class="parent"> <div class="absolute1"> <input type="text" id="letteringText" value="one line of text"> </div> <div class="absolute2"> <select id="select something"> <option value="option 1">option1</option> <option value="option 2">option2</option> <option value="option 3">option3</option> </option> </select> </div> <div class="absolute3"> <select id="select some more"> <option value="option 1">option1</option> <option value="option 2">option2</option> <option value="option 3">option3</option> </select> </div> </div> <div id="centerAll"> <canvas id="TheLeftSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas> <canvas id="TheRightSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas> <canvas id="SomeHiddenCanvas" width="300" height="300" style="display:none;"></canvas> <canvas id="AnotherHiddencanvas" width="300" height="300" style="display:none;"></canvas> <script type="text/javascript" src="javascriptFile.js"></script> </div> </body> </html>
將鼠標懸停在chartjs餅圖上時，畫布填充文本消失
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.