Q&A
canvas要素上にリンクを持った要素を表示しています。
表示はできたのですが、hrを縦にして長くする部分のcssがハマらず困っています。
test_box要素内にリンク要素とhr要素を入れています。
a要素の直下にhr要素を縦向きに置きたいです。
現状
hr要素を縦に(widthで)長くするとtest_box要素自体が大きくなってしまいhrの場所が変わってしまいます。
仮説
widthがtest_box要素よりも大きくなってしまうので位置が変わってしまうのかなと思っています。
<body> <div id="mapray-container"></div> </body> ....省略 const test_box = document.createElement("div"); const test = document.createElement("a"); const v_line = document.createElement("hr"); var cont = document.getElementById("main-container") test.href = "http://hogehoge.com"; test_box.className = "test-link"; test_box.style.left = "36px"; test_box.style.top = "193px"; test_box.style.position = "absolute"; test.style.textDecoration = "none"; test.style.borderRadius = "5px"; test.style.height = "1.5rem" test.style.width = "10%" test.style.backgroundColor = "#55c500" test.style.color = "white" test.style.padding = ".3rem .5rem" test.innerText = "G11" v_line.style.border = "thin solid rgb(237, 171, 123)"; v_line.style.transform = "rotate(90deg)"; cont.appendChild(test_box) test_box.appendChild(test) test_box.appendChild(v_line)
box-sizingやmargin: auto;など色々試しましたが、うまくいきませんでした。
どなたか詳しい方、参考になるサイトを知っている方、居ましたらご教授いただきたく思います。
よろしくお願いします
回答1件
0
以下のようにしてはいかがでしょうか？
css
1hr{ 2 transform-origin: top left; 3}
transform-origin は CSS のプロパティで、要素の変形における原点を設定します。
投稿2021/04/28 00:37
総合スコア36115
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/28 01:10
2021/05/10 10:25