自动调整jquery工具栏的大小并将其对齐_Jquery_Html

自动调整jquery工具栏的大小并将其对齐

jquery html

自动调整jquery工具栏的大小并将其对齐,jquery,html,Jquery,Html,我有3个按钮的简单工具栏（将来会有更多的按钮。按钮上的文本是不相关的）。第一个问题是：我将左边距和右边距设置为将工具栏像设置在页面中央一样。如何在页面中间设置工具栏（水平），没有代码>空白左/边距右/代码>？第二个问题是：当我想调整页面大小时，工具栏会在右边留下一些空闲空间如何使工具栏看起来像这样这是第页的代码 <html> <head> <meta charset="utf-8"> <title>Hotel reservation<

我有3个按钮的简单工具栏（将来会有更多的按钮。按钮上的文本是不相关的）。第一个问题是：我将

左边距

和

右边距

设置为将工具栏

像设置在页面中央一样

。如何在页面中间设置工具栏（水平），没有代码>空白左/边距右/代码>？

第二个问题是：当我想调整页面大小时，工具栏会在右边留下一些空闲空间

如何使工具栏看起来像这样

这是第页的代码

<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>


酒店预订
#工具栏{
填充物：5px；
显示：内联块；
左缘：20%；
右边距：15%；
}
$（函数（）{
$（“#item1”）.button（）；
$（“#项2”）.button（）；
$（“#项3”）.button（）；
$（“#工具栏”）.autosize（）；
});
所以第一件事是第一件事。只是为您修复了一个bug，您没有关闭输入中的样式标记。第二，你能做一些事情，包括在工具栏周围放置一个容器并将文本居中吗
<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>


酒店预订
/*添加容器*/
.集装箱{
宽度：100%；
文本对齐：居中；
}
#工具栏{
填充物：5px；
保证金：0自动；
显示：内联块；
}
/**甚至可以使用媒体查询来更改宽度
某个断点后的按钮数量，如下所示：**/
@介质（最大宽度：580像素）{
#工具栏输入[类型=按钮]
{
宽度：100%；
}
}
$（函数（）{
$（“#item1”）.button（）；
$（“#项2”）.button（）；
$（“#项3”）.button（）；
$（“#工具栏”）.autosize（）；
});

一把小提琴会很有帮助。我不知道这件事，谢谢你加入演示。