詳しい人求む！

htmlの位置調整について

締切済

質問者：ahahahabrain
質問日時：2021/08/23 19:57
回答数：1件

htmlで２つの数値をそれぞれ線で四角に囲って、並べたいのですが、
数値は可変の値で、枠線と枠線の間の幅は変えずに下のようなレイアウト作成をしたいです。
CSSを使って、うまくできないでしょうか。画面上のの右上角らへんに配置したいです。

↓ちょっと変ですが、こんなイメージです。数値が四角で囲ってある感じです。
------------ 　----------------
| 99999 | 　| 39949434 |
------------ 　----------------
　　　　　＜ー＞　
　　　　　数値が変わり、四角の幅が変わっても
　　　　　ここの幅を常に同じにしたいです。
topやrightで位置を指定してしまうと、数値の桁が変わると場合、間の幅が変わってしまい困っております。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2021/08/23 22:32

こんばんは

どのようなHTMLにしたいのかわからないけれど、ひとまずmarginを固定値で指定しておけば良いのでは？

方法はいろいろあるので、以下はごく簡単な一例です。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
#hoge > span{
display: inline-block;
padding: 0.2em;
border:1px solid gray;
}
#hoge > span + span{ margin-left: 30px; }
</style>
</head>
<body>

<div id="hoge">
<span>99999</span>
<span>39949434</span>
</div>

</body>
</html>