0

3 つのボタンを備えたシンプルなツールバーがあります (将来的にはボタンが増える予定です。ボタンのテキストは関係ありません)。最初の問題は次のとおりです。ツールバーを設定しmargin-leftます。なしでページの中央（水平）にツールバーを設定する方法は？margin-rightlike in the center of pagemargin-left/margin-right ここに画像の説明を入力

2 番目の問題は次のとおりです。ページのサイズを変更したい場合、ツールバーの右側に空き領域が残ります。ここに画像の説明を入力

ツールバーをこのようにするにはどうすればよいですか?

ここに画像の説明を入力

これがページのコードです

<html>
<head>
<meta charset="utf-8">
<title>Hotel reservation</title>
<link rel="stylesheet" href="jquery-ui-themes-1.10.3/themes/ui-darkness/jquery-ui.css" />
<script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<style>
#toolbar {
    padding: 5px;
    display: inline-block;
    margin-left: 20%;
    margin-right: 15%;
}
</style>
<script>
$(function() {
    $( "#item1" ).button();
    $( "#item2" ).button();
    $( "#item3" ).button();
    $( "#toolbar").autosize();
});
</script>
</head>
<body>
<div id="toolbar" class="ui-widget-header ui-corner-all ui-widget-content">
    <input style="font-family: times new roman; type="button" id="item1" value="Общая информация"/>
    <input style="font-family: times new roman; type="button" id="item2" value="Забронировать номер"/>
    <input style="font-family: times new roman; type="button" id="item3" value="О нас"/>
</div>
</body>
</html>

デモンストレーション。

4

1 に答える 1

1

ですから、まず第一に。入力内のスタイルタグを閉じていませんでした。2 つ目は、ツールバーの周りにコンテナを配置して、テキストを中央に配置することを含む何かを行うことはできますか?

<html>
<head>
    <meta charset="utf-8">
    <title>Hotel reservation</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style>
        /* Add Container */
        .container{
            width:100%;
            text-align:center;
        }
        #toolbar {
            padding: 5px;
            margin:0 auto;
            display:inline-block;
        }
        /** Could even use media queries to change the width
            of the buttons after a certain breaking point like below: **/
        @media (max-width: 580px) {
            #toolbar input[type=button]
            {
                width:100%;
            }
        }
    </style>
    <script>
        $(function() {
            $( "#item1" ).button();
            $( "#item2" ).button();
            $( "#item3" ).button();
            $( "#toolbar").autosize();
        });
    </script>
</head>
<body>
    <div class="container">
        <div id="toolbar" class="ui-widget-header ui-corner-all ui-widget-content">
            <input style="font-family: times new roman;" type="button" id="item1" value="Общая информация" />
            <input style="font-family: times new roman;" type="button" id="item2" value="Забронировать номер"/>
            <input style="font-family: times new roman;" type="button" id="item3" value="О нас"/>
        </div>
    </div>
</body>
</html>

デモンストレーション。

于 2013-07-20T22:47:53.800 に答える