[英]CSS How to add custom button in current theme?
I'm using Mobix theme, and I need to add some custom button.我正在使用 Mobix 主题,我需要添加一些自定义按钮。
http://sindevo.com/mobix/#!/blog.html http://sindevo.com/mobix/#!/blog.html
What I want is something like this picture actually the three button Green, Yellow, and Purple.我想要的是像这张图片实际上是三个按钮的绿色、黄色和紫色。
This theme based on Framework7 but I can't find how I can do like what I want.这个主题基于 Framework7,但我找不到如何做我想做的事。
So far I add this code到目前为止,我添加了这段代码
<div style="position:absolute;">
<a href="#" class="button button-fill color-blue">Tes A</a>
</div>
after <div class="post_title">.....</div>
and here is the result.在<div class="post_title">.....</div>
,这是结果。
Just trying sindevo answer but still the same.只是尝试 sindevo 答案,但仍然相同。
<div class="post_entry">
<div class="post_date">
<span class="day">#{{ $queue->id}}</span>
</div>
<div class="post_title">
<h2><a href="{{ route('operator.antrian.show', $queue->id )}}">{{ $queue->no_kendaraan }}</a></h2>
</div>
<div class="buttons_container">
<a href="#" class="button button-fill color-green" style="width:15%;">Tes A</a>
<a href="#" class="button button-fill color-yellow" style="width:15%;">Tes B</a>
<a href="#" class="button button-fill color-purple" style="width:15%">Tes C</a>
</div>
</div>
Here is my css这是我的 css
.post_title{
width:15%;
float:left;
margin:0 0 0 10%;
}
.buttons_container{
width: 50%;
float: left;
margin: 0 0 0 5%;
}
Anyway there is no margin in my button, but its fill the entire block.无论如何,我的按钮中没有边距,但它填满了整个块。 What's wrong with my code?我的代码有什么问题?
//use table and then place the button (button class="form_submit") as u need in table section //使用表格,然后根据需要在表格部分放置按钮(按钮类=“form_submit”)
<ul class="responsive_table">
<li class="table_row">
<div class="table_section_14"> </div>
<div class="table_section_14">Medium</div>
<div class="table_section_14">Business</div>
<div class="table_section_14">Deluxe</div>
</li>
<li class="table_row">
<div class="table_section_14"> </div>
<div class="table_section_14">Medium</div>
<div class="table_section_14">Business</div>
<div class="table_section_14">Deluxe</div>
</li></ul>
Here is the structure of a blog posts code:这是博客文章代码的结构:
<div class="post_entry">
<div class="post_date">
<span class="day">24</span>
<span class="month">january</span>
</div>
<div class="post_title">
<h2><a href="blog-single.html">Sed ut perspiciatis unde omnis iste accusantium.</a></h2>
</div>
</div>
You need to:你需要:
1. In style.css make the post_title smaller in width 1.在 style.css 中使 post_title 的宽度变小
.post_title{
width: 80%;
float: left;
margin: 0 0 0 10%;
}
Let's say width:50%;假设宽度:50%;
2. Then build a new DIV container with your buttons 2.然后用你的按钮构建一个新的 DIV 容器
<div class="buttons_container"></div>
<a href="#">button</a>
<a href="#">button</a>
<a href="#">button</a>
</div>
3. In style.css add 3.在style.css中添加
.buttons_container{
width: 25%;
float: left;
margin: 0 0 0 5%;
}
4. Make sure the total amount of your blocks that are in that line do not pass 100%. 4.确保该行中的块总数不超过 100%。
This requires basic CSS knowledge.这需要基本的 CSS 知识。
Regards.问候。
Make sure your .button class in CSS have float left.确保 CSS 中的 .button 类向左浮动。
Your 3 buttons should have float left in order to stay one after eachother.您的 3 个按钮应该向左浮动,以便保持一个接一个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.