首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

(Grid js)我想让search按钮在右边,add按钮在左边,我该怎么办?

要实现search按钮在右边,add按钮在左边的布局,可以使用Grid布局来实现。Grid布局是一种二维布局系统,可以将页面划分为行和列,通过指定元素所在的行和列来控制元素的位置。

首先,你需要在HTML中创建一个包含search按钮和add按钮的容器元素,例如一个div元素。然后,为这个容器元素应用Grid布局。

在CSS中,使用display: grid;来启用Grid布局。然后,通过grid-template-columns属性来定义列的宽度,使用fr单位来指定比例关系。例如,如果你想让search按钮占据右边的1/4宽度,add按钮占据左边的3/4宽度,可以这样设置:

代码语言:txt
复制
.container {
  display: grid;
  grid-template-columns: 3fr 1fr;
}

接下来,将search按钮和add按钮放置在容器元素中,并通过CSS选择器来选择它们,并设置它们的样式。

代码语言:txt
复制
<div class="container">
  <button class="search-button">Search</button>
  <button class="add-button">Add</button>
</div>
代码语言:txt
复制
.search-button {
  /* 样式设置 */
}

.add-button {
  /* 样式设置 */
}

通过以上步骤,你就可以实现search按钮在右边,add按钮在左边的布局了。

关于Grid布局的更多详细信息,你可以参考腾讯云的产品文档:Grid布局介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

动手练一练,做一个现代化、响应式的后台管理首页

曾几何时,动手做一个属于自己的UI框架模板,看了手里现存的源码,最终还是放弃了,做好这个,除了代码量还要有产品化的思维,做好真心不容易。...1、如下图所示将整个页面分为两大块,左边的 部分和右边的 部分: 2、 部分将拆分成 logo 部分和 菜单列表,由 标签包裹 3... 你可能注意到,添加了 svg 部分,并且设置了隐藏,这里我们使用 SVG Sprites(雪碧图)技术,方便我们菜单里添加菜单图标,这里从 Envato 网站下载了后台管理相关的图标...当我们每次点击菜单的 折叠/展开 按钮时,菜单将会折叠, 如下图所示: 这个界面只会在大屏的状态下可见,当菜单折叠时,菜单的宽度将由 220px 变成 40px,菜单的名称将会隐藏,右边的 .page-content...元素则设置成隐藏状态 .search-and-user 搜索表单和用户头像区域则使用绝对定位的方式放置 mobile 菜单按钮的右侧 相关的CSS代码如下所示: @media screen and (

1.1K00

动手练一练,做一个现代化、响应式的后台管理首页

关于响应式需要用到 flexbox 、 grid 布局,rem单位、vw和vh视口单位、媒介选择器等;菜单折叠的问题,这里需要通过JS脚本来触发菜单文本和logo的隐藏;小屏设备菜单的按钮,我们默认隐藏在左边的菜单里...,通过媒介查询器触发显示,并需要在按钮上添加JS事件,触发菜单的打开与隐藏。... 你可能注意到,添加了 svg 部分,并且设置了隐藏,这里我们使用 SVG Sprites(雪碧图)技术,方便我们菜单里添加菜单图标,这里从 Envato 网站下载了后台管理相关的图标...> article:first-child, .page-content .grid > article:last-child { grid-column: 1 / -1; } 六、处理左边菜单的折叠...元素则设置成隐藏状态 .search-and-user 搜索表单和用户头像区域则使用绝对定位的方式放置 mobile 菜单按钮的右侧 相关的CSS代码如下所示: @media screen and (

1.1K00
  • 动手练一练,做一个响应式的后台管理面板

    dis_k=cc244950af075578f6af33e81dde703b&dis_t=1584355558 界面的菜单可以通过点击左下角的按钮进行折叠,右边的空白内容,用来示意需要填充的内容。...媒介查询等响应式相关的知识点;菜单折叠的问题,这里需要通过JS脚本来触发菜单文本和logo的隐藏;小屏设备菜单的按钮,我们默认隐藏在左边的菜单里,通过媒介查询器触发显示,并需要在按钮上添加JS事件,触发菜单的打开与隐藏... 你可能注意到,添加了 svg 部分,并且设置了隐藏,这里我们使用 SVG Sprites(雪碧图)技术,方便我们菜单里添加菜单图标,这里从 Envato 网站下载了后台管理相关的图标...> article:first-child, .page-content .grid > article:last-child { grid-column: 1 / -1; } 六、处理左边菜单的折叠...元素则设置成隐藏状态 .search-and-user 搜索表单和用户头像区域则使用绝对定位的方式放置 mobile 菜单按钮的右侧 相关的CSS代码如下所示: @media screen and (

    1.3K10

    树莓派综合项目2:智能小车(二)tkinter图形界面控制

    python中已经有了from关键字啦 resolution=1, # 设置步距值 orient=HORIZONTAL, # 设置水平方向 #如果我们设置成垂直方向改怎么办呢...本实验中用的是这种方式。...该车的行进控制与履带车的行进控制类似: 前进和后退很简单,左右两边的方向都朝前或朝后,速度一致; 原地顺时针旋转时,左边轮子前进,右边轮子后退,速度一致; 原地逆时针旋转时,左边轮子后退,右边轮子前进...#字符串2/3两位为控制A(左边车轮占空比)速度信号 B_speed = cmd[6:8] #字符串6/7两位为控制B(右边车轮占空比)速度信号 print...# 设置显示的标签 from_=100, # 设置最大最小值 to=0, resolution=2, # 设置步距值 orient=VERTICAL, #如果我们设置成垂直方向改怎么办

    2.8K30

    项目需求讨论-标题栏上的搜索功能

    :layout_gravity="center",然后因为搜索按钮右边,对ImageView使用android:layout_gravity="right"。...这时候有人会问了,那左边的返回按钮呢。怎么没写在布局中。...,覆盖了一层横向布局,用来显示SearchView和取消按钮界面默认是隐藏的,只有当按了搜索图标按钮,再让这个横向布局显示,盖在上面,(当然同时也可以原来的标题和搜索图标按钮隐藏)。...原来,Toolbar自带的左边按钮,是默认先占了它的位置,然后剩下的面积再是放我们自己定义的FrameLayout,所以我们的FrameLayout总体就先往右边偏移了。...这时候又因为我们的标题是FrameLayout的中间,所以标题也整体往右边便宜了。那岂不是都不能实现了??怎么处理呢??答案当然是有方法处理。(这B装的好累。)

    1.4K10

    终于等到你,新的虚拟键盘API 即将到来,快来先睹为快吧!

    键盘底边距 keyboard-inset-left 键盘左边距 keyboard-inset-width 键盘宽度 keyboard-inset-height 键盘高度 通过使用上述变量,我们可以虚拟键盘激活时修改布局...为桌面使用不同的值 假设我们想在桌面浏览器上进一步调整浮动按钮的位置,我们如何做呢?嗯,考虑使用 max() 比较函数,结果行得通。...每个情境中都使用它可能会引起问题。是的,你没看错。 让我们举个简单的例子。我们有一个联系页面,其中包含长内容和表单输入。如果我们选择虚拟键盘覆盖页面内容,那么将无法滚动到表单的最后。...心里,为什么不把CSS比较函数和虚拟键盘的值混合在一起呢?试了一下,结果还真行。 请查看下面的视频: 这是怎么运作的?...怎么办?通过混合比较功能和虚拟键盘API,我们可以键盘显示时隐藏导航。 这是实现此功能的CSS代码。

    35720

    win10 uwp 简单MasterDetail UWP 导航List点击后退按钮页面更改大小修改显示修改代码源码左右的列表和内容的相互操作

    开始的窗口是很大,可以两栏,其中左边显示列表,右边因为开始没有点击列表就显示图片,点击列表显示内容,就是下面的图。 ? ?...默认Grid左边Auto,右边*,分两个,然后左边是List,如果没有Frame,那么显示图片 如果屏小,那么就显示List,这时我们修改Grid左边*,右边auto,然后把我们Grid,有Frame...,修改为左边,这样我们右边就没有,左边有List和Grid 如果我们HasFrame,还记得hasFrame在哪?...首先新建 Model,放下随意的类,作为显示的内容,然后ViewModel使用ObservableCollection,当然给他的也是随意的 界面我们需要Grid,这时绑定了GridLength...就是列表啦,这个不想说 绑定是用x:Bind,要OneWay 写 List 需要使用 Grid 控制他的位置和背景,因为 List 背景透明,其实 List 也可以用背景,但是想我会在 List

    1.9K00

    silverlight3新增功能2:WriteableBitmap

    虽然能正确地显示图片,但有个问题,Loaded事件中调用,以及自己点击按钮调用,出来的效果是不一样的(左下角是Loaded事件中的效果,右下角是点击按钮后出来的效果)。...以前为了实现这个功能,还试过把图片放在一个ScrollViewer中它自由拉伸再取它的实际大小,以后再也不需要做这种麻烦事了。...下面这个SL中,左边右边的框里面加了100个Grid和TextBox,而中间那个什么都没有加。       ...(text);     grid1.Children.Add(grid);     grid = new Grid { Background = new SolidColorBrush(Colors.Transparent...) };     text = new TextBox { Text = i.ToString() };     grid.Children.Add(text);     grid3.Children.Add

    43840

    win10 uwp 简单MasterDetail

    开始的窗口是很大,可以两栏,其中左边显示列表,右边因为开始没有点击列表就显示图片,点击列表显示内容,就是下面的图。...默认Grid左边Auto,右边*,分两个,然后左边是List,如果没有Frame,那么显示图片 如果屏小,那么就显示List,这时我们修改Grid左边*,右边auto,然后把我们Grid,有Frame...,修改为左边,这样我们右边就没有,左边有List和Grid 如果我们HasFrame,还记得hasFrame在哪?...首先新建 Model,放下随意的类,作为显示的内容,然后ViewModel使用ObservableCollection,当然给他的也是随意的 界面我们需要Grid,这时绑定了GridLength...就是列表啦,这个不想说 绑定是用x:Bind,要OneWay 写 List 需要使用 Grid 控制他的位置和背景,因为 List 背景透明,其实 List 也可以用背景,但是想我会在 List

    41020

    CSS 中你需要知道 auto 的一切!

    我们有一组按钮移动设备上,我们希望它们彼此相邻(每个按钮包装器占据其父元素的50%),而在桌面设备上,每个按钮都应该占据其父元素的全部宽度。怎么做?...例如,如果一个flex项目的左边是margin-left: auto,那么它将被推到最右边。 考虑下面的模型,父级元素是一个 flex 布局: ? 我们想把第二项推到最右边,自动边距就派上用场了。...父项具有padding: 16px,因此子项位于顶部和左侧的16px处。 有趣,不是吗? 现在,你可能会问,这样做有什么好处?好吧,继续。...我们右侧包含一行标题,描述和一个操作按钮的行。 我们希望操作按钮贴在右侧。...: 0.7fr 2fr; } } 想将label 与input的左边缘对齐。

    5.3K30

    Vue.js小白速成手册01

    现在,div里面写一点东西,就画一个按钮吧。...3.1 插值语法 插值语法是最简单的,就是像上面那样,用双大括号括起来一个数据,同时这个数据vue里面的data中去定义就行了。...> 注意,如果属性左边加上了冒号,那么双引号里面的内容就是纯粹的JS表达式了,它并不是一个静态值哦!...3.2 循环语法 刚才的案里中,我们只有一个按钮,现在思考一个问题,假如我有多个按钮怎么办呢?我们能不能定义一个数组,然后数组里面有多少个元素,页面就显示多少个按钮?...vue中,我们已经不用去关心dom操作啦,只需要关心数据如何绑定就行了。简单来说,你不就是想要input框里面的内容吗?一个名字,就叫buttonName吧,放到data里面。

    1.8K10

    Cytoscape中文教程(3)

    (v)点击search button。稍等一会,cytoscape画布就会显示蛋白质(nodes)之间的相互作用网络,并且以grid形式排列,连接方式是获取的interacitons(edges)。...8.点击select attributes 按钮 可以选择属性中的一个展示,它在data panel 工具栏的最左边。这会展示可获得的属性的列表,并且选择的属性会高亮显示。...具体是,画布右上方有个搜索按钮,输入名字,当都输入的时候一个下来菜单会显示匹配node ID的列表。...设置可视化的node 特征 18.左边面板控制节点和边的可视化特征。 Network右边有个style,点开,node和edge和network属性选项卡,位于control panel的底部。...现在看到range bar分为了两半,左边黑色,右边是梯度颜色,绿色到白色 ? image.png 25 滑动绿色的三角往左边去,留下一个端的黑色部分,像下图d。

    3.9K118
    领券