CSS導航欄UL不居中

我正在學習如何做一個負責任的網站按照這裏的教程http://www.hongkiat.com/blog/responsive-web-nav/CSS導航欄UL不居中

我有一個問題：我什麼也沒姿勢要正確UL的NAV &內依然保持UL CENTERED在屏幕上。出於某種原因，即使

ul{display:inline-block;}

和

nav{text-align:center;}

鏈接#pull將推動UL到左邊，而不是使之集中了。我想將一個登錄表單懸浮在NAV右側的UL中，其中#pull現在在，而我不能在我的生活中弄清楚如何在保持UL完全集中在屏幕上的情況下執行此操作， UL的權利似乎推動了UL，儘管它應該始終居中。

我相信它只是一個基本的CSS定位問題，我不明白，因爲我是新手，但我只需要放置更多的內容，我不知道如何。

的jsfiddle

來源

2014-01-05 cpuxtech

jsfiddle.net/aF3Pd這是JSFiddle – cpuxtech

可能重複的[CSS導航欄定位元素]（http://stackoverflow.com/questions/20929484/css-navigation-bar-positioning-elements） – halfer

我可以'如果你提出了兩個問題（然後很快再提出問題），或者你提出了一個問題（然後再重複問了三次），那麼問題就很有效。無論哪種方式，這裏都會有太多的複製和粘貼。請堅持只提問一次，如果您發現自己提出的問題類似但不完全相同，請在問題中注意避免關閉/降低提示。 – halfer

嘗試增加

position:relative; 
left: 8vw;

你的資產淨值UL認證。 See this有關vw和vh以及更多信息。

來源

2014-01-05 06:26:49 Hevlastka

一個簡單的方法是通過使用position css屬性來定位UL上的「菜單」按鈕。請確保您設置一個position:relative屬性的導航標籤，然後採取菜單按鈕，設置如下：

position:absolute; 
top:0; 
right:0;

這應該保持在右上角的菜單按鈕，特別是在響應網頁設計的情況。

見小提琴：http://jsfiddle.net/p3tK5/

來源

2014-01-05 06:28:57

您正在使用PX的響應式設計，而不是使用％

更新CSS //所有寬度％

nav{ 
    height:50px; 
    width:100%; 
} 

nav ul{ 
    padding:0; 
    margin: 0 auto;  /*No Y-axis margin, Only an Auto X-axis margin, making the ul centered*/ 
    width:80%; 
} 

nav li{ 
    list-style:none; /*display:inline; also gets rid of the list styles*/ 
    float:left;  /*Floating the menu list items to the left so they will be 
        displayed horizontally side by side, but floating an element 
         will also cause their parent to collapse*/ 
    dislay: inline-block; 
    min-width: 23%; 
} 

#navaside { 
    height:50px; 
    width:15%;       /* Takes up 100% of the parent's width, 
} 

#navaside a#pull{ 

    color:#fff;     /* Color of the link */ 
    display:inline-block;  /* display:block (also)--Allows the width and line height to actually take affect */ 
    width:100%;    /* 5 elements at 140px = 700px, the width of the 
}

檢查

您可以設計a或李根據您的要求，我剛剛修復了一些CSS，使其響應

來源

2014-01-05 06:44:15

只要讓你的清單display:table; margin: 0 auto。

來源

2017-07-19 06:43:39 Sunny

CSS導航欄UL不居中

回答

相關問題