中心沒有設置寬度

一個div有沒有辦法做到這一點？使用可以更改項目數量的導航時，最好不用計算with和更新css，而只需要一個可行的解決方案。中心沒有設置寬度

如果這是不可能的（我假設它是）任何人都可以指向我一個javascript可以做到這一點？

編輯

重：提供代碼一些代碼基本上我的工作，我認爲是最典型的設置

<div class="main"> 
<div class="nav"> 
    <ul> 
    <li>short title</li> 
    <li>Item 3 Long title</li> 
    <li>Item 4 Long title</li> 
    <li>Item 5 Long title</li> 
    <li>Item 6 Extra Long title</li> 
    </ul> 
</div> 
</div>

編輯

.main { 
width:100%; 
text-align:center; 
} 
.nav { 
margin:0 auto; 
} 
.nav ul li { 
display:inline; 
text-align:left; 
}

我已經發現這個問題/這些解決方案是，內容是碰一碰，以添加一些右填充（共40像素）似乎解決這個跨越我檢查的瀏覽器（右 O FF IE）。 .nav {margin：0 auto; padding-right：40px; } 我不知道這個值是從哪裏來的，爲什麼40px修復了這個問題。

有誰知道這是哪裏來的？它不是一個邊距或填充，但不管我做什麼，第一個約40px都不能用於放置。也許這是添加這個的ul或li。

我看了一下顯示屏：這樣的表單元格的方式，但有一個與IE是併發症，它仍然有同樣的問題，因爲其他的解決辦法

編輯（終）

好吧，我已經嘗試了一些東西，關於縮進。重置了所有填充爲0

*{padding:0;}

是固定的，而我不需要抵消填充（我想我會離開我的整個過程，這樣即使有人遇到這種情況，「會保存一段時間）

感謝您的意見和回覆

來源

2009-11-29 Daniel

如果不知道DIV中有什麼，這很難回答。這聽起來像是，作爲先決條件，您需要使DIV彈性（表格）寬度而不是默認塊寬度。這是一個完全沒有問題的問題。 – jpsimons 2009-11-29 04:10:43

你能提供你正在使用的HTML \ CSS和你的問題嗎？如果解決方案涉及Javascript，我們遇到了麻煩...... – 2009-11-29 07:40:47

使用下面列出的解決方案，沒有附加填充的問題...我使用輸入來模擬菜單...因此這可能表示UL樣式是添加填充。 – PortageMonkey 2009-11-29 19:06:58

<div class="nav"> 
<ul> 
    <li>menu 1</li> 
    <li>menu 2</li> 
    <li>menu 3</li> 
</ul> 
</div> 

<style> 
.nav { text-align:center; } 
.nav ul { display:inline-table;} 
.nav ul li {display:inline;} 
</style>

這一切，

裏的更改號碼，但UL將始終中心對齊

帶班化妝的div =「導航」裏面地方UL認證，UL將始終中心對齊

來源

2012-08-29 20:02:25 Dashrath

我加了一個補充（儘管不言自明）是將'padding-left：0;'添加到'.nav ul'，這裏沒有使用重置css – Daniel 2012-08-29 20:27:53

jsbin.com/awejuk/1/ – Daniel 2012-08-29 20:36:04

~~如果你想在容器中心一個div，嘗試設置保證金左和容器自動的保證金的權利。~~

它看起來像有人有你做同樣的問題。希望這比我的第一個建議更好。 :)

http://www.leveltendesign.com/blog/nickc/centering-a-css-menu-without-width-aka-shrink-wrap

來源

2009-11-29 04:06:13

寬度必須設置爲這個工作。 – carillonator 2009-11-29 04:14:05

啊，是的。我的錯。現在我明白爲什麼要問這個問題了。 – 2009-11-29 04:19:54

+1爲信息鏈接。好東西。收藏成功！ – 2009-11-29 04:45:48

基於什麼，我相信你是問，要動態中心一個div，因爲寬度會改變基於許多菜單項是如何可見。我想你也會喜歡這個以調整大小爲中心。這可以通過一些簡單的JavaScript來完成，如下所示。我嘲笑了你可以玩的一個例子，在IE和FF中工作。 JavaScript是關鍵。另外值得注意的是，儘管不是你的問題的一部分，但如果你遇到這種情況，控制調整大小的最小寬度可能是有意義的。

<html> 
<head runat="server"></head> 
<body onload="centerMenu()" onresize="centerMenu()"> 
<form id="form1" runat="server"> 
    <div id="menuWrapper" style="display:inline; height:20px;"> 
     <input type="text" value="menuItem" /> 
     <input type="text" value="menuItem" /> 
     <input type="text" value="menuItem" /> 
     <input type="text" value="menuItem" /> 
    </div> 
</form> 
<script type="text/javascript"> 
function centerMenu() 
{ 
    //Wrap your menu contents in a div and get it's offset width 
    var widthOfMenu = document.getElementById('menuWrapper').offsetWidth; 
    //Get width of body (accounting for user installed toolbars) 
    var widthOfBody = document.body.clientWidth; 
    //Set the width of the menu Dynamically 
    document.getElementById('menuWrapper').style.marginLeft = (widthOfBody - (widthOfMenu))/2; 
} 
</script> 
</body> 
</html>

來源

2009-11-29 07:32:52 PortageMonkey

如何

#form1 {text-align:center} 
    #menuWrapper{display:inline-block;text-align:left}

而且，woudl更容易獲得你的菜單標記如下：

<form id="navWrapper"> 
    <ul> 
     <li><input></input></li> 
     ... 
    </ul> 
</form>

，並使用

#navWrapper {text-align:center} 
    #navWrapper ul {display:inline-block;text-align:left} 
    #navWrapper li {display:inline}

來源

2009-11-29 10:47:42 wheresrhys

很難說沒有看到你想要達到的目標但至少應該幫助...

你的CSS

#main { 
    width:100%; 
    text-align:center; 
} 

#nav { 
    margin:0 auto; 
} 

#nav ul li { 
    display:inline; 
} 

#content { 
    text-align:left; 
}

你的HTML

<div id="main"> 
    <!-- Your Navigation Menu --> 
    <div id="nav"> 
     <ul> 
      <li>Nav 1</li> 
      <li>Nav 2</li> 
      <li>Nav 3</li> 
     </ul> 
    </div> 
    <!-- Your Content Area --> 
    <div id="content"> 
     Lorem ipsum dolor sit amet, consectetur ... 
    </div> 
</div>

來源

2009-11-29 14:25:22 luckykind

這工作（在某種程度上:) 它不工作，我打算它，但我將不得不通過CSS文件，看看是否有任何衝突。但某種程度是指居中。它以內容的左側爲中心，所以對中有點偏離。我已經嘗試在#nav的右側添加一個40px的填充，但是這意味着需要在等式中添加一個靜態值。雖然40px的作品，根據元素的大小，它會傾向於掛在一邊或其他 – Daniel 2009-11-29 17:34:29

是啊...就像我說過，很難說如果沒有看到你到底在做什麼...但它聽起來像與其他一些樣式衝突......這絕對適用於它自己，並且如果您嘗試集中某些內容，則希望避免添加靜態值。嘗試暫時添加「邊框：1px純紅色」;到問題區域，以便您可以更好地瞭解其佈局方式... – luckykind 2009-11-29 18:25:19

這裏一個很好的解決方法centering a div with no width。

是無表格，正在任何瀏覽器中工作！

（編輯：死鏈接替換爲一個從archive.org BTW，該技術描述有：。換你DIV在SPAN使其在線）

來源

2010-05-14 01:59:20 Snowalker

注意：所提供的鏈接（參考）不再可用。 – 2016-01-21 16:27:50

中心沒有設置寬度

回答

相關問題