CSS Как добавить пользовательскую кнопку в текущую тему?

Question

Я использую тему Mobix, и мне нужно добавить какую-то пользовательскую кнопку.

http://sindevo.com/mobix/#!/blog.html

То, что я хочу что-то вроде этой фотографии на самом деле три кнопки зеленый, желтый и фиолетовый.

Эта тема основана на Framework7, но я не могу найти, как я могу сделать, как то, что я хочу.

До сих пор я добавить этот код

<div style="position:absolute;"> 
<a href="#" class="button button-fill color-blue">Tes A</a> 
</div> 

после <div class="post_title">.....</div> и вот результат.

Просто пытался 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> 

Вот мой CSS

.post_title{ 
width:15%; 
float:left; 
margin:0 0 0 10%; 
} 
.buttons_container{ 
    width: 50%; 
    float: left; 
    margin: 0 0 0 5%; 
} 

Во всяком случае нет маржи в моей кнопки, но его заполнить весь блок. Что случилось с моим кодом?

Answer 1

// использовать таблицу, а затем поместить кнопку (кнопка класс = «form_submit»), как и нужно в таблице раздела

<ul class="responsive_table"> 
       <li class="table_row"> 
        <div class="table_section_14">&nbsp;</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">&nbsp;</div> 
        <div class="table_section_14">Medium</div> 
        <div class="table_section_14">Business</div> 
        <div class="table_section_14">Deluxe</div> 
       </li></ul> 

Answer 2

Вот структура кода Публикаций:

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

Вам нужно:

1. в style.css сделать post_title меньше по ширине

.post_title{ 
    width: 80%; 
    float: left; 
    margin: 0 0 0 10%; 
} 

Предположим, ширина: 50%;

2. Затем построить новый DIV контейнер с кнопками

<div class="buttons_container"></div> 
    <a href="#">button</a> 
    <a href="#">button</a> 
    <a href="#">button</a> 
</div> 

3. В style.css добавить

.buttons_container{ 
    width: 25%; 
    float: left; 
    margin: 0 0 0 5%; 
} 

4. Убедитесь, что общая сумма ваши блоки, которые в этой строке, не проходят 100%.

Для этого необходимы базовые знания CSS.

С уважением.

Answer 3

Убедитесь, что ваш .button класс в CSS оставлен налево.

Ваши 3 кнопки должны иметь поплавок влево, чтобы оставаться один после друг друга.