移動應用程序（按鈕，標題，按鈕）的標題劃分爲3列

Question

我想創建一個div作爲標題，並分成3列，並按以下順序放置2個按鈕和一個標題： Button1（position左）標題（居中）將Button2（位置右）

這是我對這個div代碼：

<div style="margin-top: 30px;border: solid 1px black;padding: 10px;"> 
      <div style="float: left;clear: both;"><span class="butonat">MENU</span></div> 
      <div style="text-align: center;"><span style="color:#fff; text-shadow: none; font-family: Roboto;"> Kanali 1 </span></div> 
      <div style="float: right;clear: both;"><span class="butonat">KANALI 2</span></div> 
</div> 

下面是泰德顯示的圖像： http://i.imgur.com/vzfRC2t.png?1

我需要解決這個使用w的解決方案自從它的移動應用程序以來，它在移動設備上工作不力

Answer 1

不是一個好的做法，但如果你想保持當前的佈局，解決方法是給你的最後一個div減去保證金頂部爲以下幾點：

JsFiddle

<div style="float: right;margin-top:-20px;"><span class="butonat">KANALI 2</span> 

這是一個實際的例子。 給你的包裝100％寬度，並將3個兒童的寬度分爲100（33.33333333333333）。這將確保孩子們將作出響應性調整。

JsFiddle Example

.header { 
 
    margin-top: 30px; 
 
    border: solid 1px black; 
 
    width:100%; 
 
    float:left; 
 
} 
 
.header div { 
 
    float:left; 
 
    width:33.33333333333333%; 
 
} 
 
.header .center { 
 
    text-align:center; 
 
} 
 
.header .center span { 
 
    color:#000; 
 
    text-shadow: none; 
 
    font-family: Roboto; 
 
} 
 
.header .right { 
 
    text-align:right; 
 
} 
 
.header span { 
 
    padding:10px; 
 
    display:block; 
 
}

<div class="header"> 
 
    <div class="menu"> 
 
     <span class="butonat">MENU</span> 
 
    </div> 
 
    <div class="center"> 
 
     <span>Kanali 1</span> 
 
    </div> 
 
    <div class="right"> 
 
     <span class="butonat">KANALI 2</span> 
 
    </div> 
 
</div>