中心没有设置宽度

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

中心没有设置宽度

回答

相关问题