在h2上添加的保證金

我正在嘗試創建一個在左側，右側，然後是之間的標題按鈕的div。一些看起來是這樣的：在h2上添加的保證金

enter image description here

但我發現了這樣的事情：

enter image description here

你可以看到有添加保證金，我想不出爲什麼。我已經檢查了我所能做的一切，但我無法弄清楚我做錯了什麼。（據我所知，h2爲50％，我做了這個嘗試，並找出原因，右鍵正在被推下。）

這裏是我的HTML：

<div class="day_buttons"> 
      <button id="previous_day"></button> 
      <h2 id="zip_h2">What day and time would you like your stuff picked up?</h2> 
      <button id="next_day"></button> 
    </div><!--end nav_buttons-->

這裏是CSS來去用它：

#next_day 
{ 
    float: right; 
    background: transparent url(./images/icons/forward_button.gif) no-repeat top left; 
    width:4em; 
    height:4em; 
    z-index:5; 

} 

#previous_day 
{ 
    position:relative; 
    top:0; 
    left:0; 
    float: left; 
    background: transparent url(./images/icons/backward_button.gif) no-repeat top left; 
    width:4em; 
    height:4em; 
    z-index:5; 
} 
.day_buttons 
{ 
    height:3em; 
    width:100%; 
    display:inline-block; 
} 

#zip_h2 
{ 
    width: 50%; 
    margin:0px !important; 
    overflow:hidden; 
}

這是爲那些誰需要它小提琴：http://jsfiddle.net/tK72Z/

來源

2014-02-23 BlackHatSamurai

你可以做小提琴嗎？ –

@JackWilliams我加了小提琴。 – BlackHatSamurai

@Blaine如果將左側按鈕的位置設置爲絕對 – Varun

H2元素是塊級所以它會一直試圖填充「線」上的寬度的100％，除非你不告訴它。

只需將float:left添加到您的h2款式中，您應該很棒。

來源

2014-02-23 21:47:35

完美！謝謝！很好的答案！ – BlackHatSamurai

我認爲你在尋找這樣的事情。

#zip_h2 
{ 
    width: 50%; 
    margin: 0 auto; 
    text-align: center; 
}

#zip_h2 
{ 
    width: auto; 
    text-align: center; 
}

來源

2014-02-23 20:12:59

對不起，沒有幫助。不過謝謝你的建議。 – BlackHatSamurai

嘗試這樣的：

HTML：

<div class="day_buttons"> 
    <button id="previous_day"></button> 
    <h2 id="zip_h2">What day and time would you like your stuff picked up?</h2> 
    <button id="next_day"></button> 
</div>

CSS：

.day_buttons 
{ 
    position: relative; 
} 

.day_buttons h2 
{ 
    text-align: center; 
} 

.day_buttons button 
{ 
    position: absolute; 
    top: 10px; 
} 

.day_buttons #previous_day 
{ 
    left: 0; 
} 

.day_buttons #next_day 
{ 
    right: 0; 
}

來源

2014-02-23 20:15:03 user3344204

變化的CSS：

對於右鍵

#next_day 
{ 
position: absolute; 
float: right; 
top: 10px; 
right: 10px; 
background: transparent url(right.jpg) no-repeat top left; 
width:4em; 
height:4em; 
z-index:5; 
}

爲標題

#zip_h2 
{ 
margin:0px !important; 
padding-left: 20px; 
padding-right: 70px; 
text-align: center; 
overflow:hidden; 
}

來源

2014-02-23 20:26:03 Varun

只是一個小變化

top: 0; 
right: 0;

Working Fiddle

來源

2014-02-23 20:28:08 Jatin

在h2上添加的保證金

回答

相關問題