CSS現在のテーマにカスタムボタンを追加する方法は？

Question

私はMobixテーマを使用しています。カスタムボタンを追加する必要があります。

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

私が欲しいのは、この絵のようなもの実際には3つのボタン緑、黄、紫です。

Framework7に基づいてこのテーマが、私は私が欲しいもののように行うことができますどのように見つけることができません。

は、これまでのところ私は<div class="post_title">.....</div>後に、このコード

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

//使用表およびuはここ

<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

テーブルセクションに必要があるとして、ボタン（= "form_submit" ボタンクラス）を配置ブログ記事のコードの構造です：

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

あなたはする必要があり

：

のstyle.cssで

1.は

幅のPOST_TITLEを小さくします

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

たとえば、幅：50％とします。

2.は、その後のstyle.cssで

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

3.が

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

4.は総額のを確認してください追加ボタンで新しいDIVコンテナを構築しますその行にあるブロックは100％を通過しません。

これには基本的なCSSの知識が必要です。

よろしくお願いいたします。

Answer 3

CSSの.buttonクラスに浮動小数点が残っていることを確認してください。

あなたの3つのボタンは、お互いに1つのままにするために左に浮動している必要があります。