4

Web 上の数学の問題を想像してみてください。数学の問題を表示して、ユーザーが答えをその右側に入力できるようにしたいと思います。構造を整えようとしています。回答の内部テキストを変更するために使用するカスタム ボタンがあります。

数学の問題は で与えられ"problemtext"、答えは で与えられ"problemanswer"ます。ユーザーが数字パッドをタップすると、その数字が"problemanswer"セグメントに配置されます。

この設定の問題点は、答えが問題の下に表示されていることです。

ここに画像の説明を入力

しかし、私は答えが問題の下ではなく、問題のすぐ右にあることを望んでいます。さらに、答えの周りにボックス（または境界線）を付けたいと思います。これどうやってするの？私のhtml/cssはどのように見えるべきですか?

<div id="problem" class="text" style="display:none">
    <div id="problemoverall" align="center">
        <div id="problemtext" style="font: bold 65px Arial;">
        </div>
        <div id="problemanswer" style="font: bold 65px Arial;">
        </div>
    </div>
</div>

ここに私が持っているいくつかの関連CSSがあります

.text {
text-align:center;
font-size:16px; 
line-height: 165%;
color:#f1f1f1;
}

.text p {
margin: 8px 0;
}
4

1 に答える 1

10

を使用しdisplay: inline;ます。次の CSS ルールを追加します。

#problemtext, #problemanswer{    
    display: inline;
}

ご覧ください: http://jsfiddle.net/cherniv/dPSav/1/

于 2013-09-08T18:55:15.340 に答える