Div內的文本卡在右側

div內的文本（或其他術語中的UL）僅停留在div的右側。無論我改變什麼，它的內容都不會保持中心一致。Div內的文本卡在右側

HTML：

<!DOCTYPE html> 
<html> 

<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Lakeside Books</title> 
    <link rel="stylesheet" type="text/css" href="masterstyle.css"> 
    <meta name="viewsize" content="width-device-width,initial-scale=1.0"> 

    <!--[if IE]> 
     <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

</head> 

<body> 
    <div id="wrapper"> 
     <div id="sidebar"> 
      <nav id="nav"> 
       <div id="searchbar"> 
        <form action="http://www.example.com/search.php"> 
         <input type="text" name="search" placeholder="Enter Book Title"/> 
        </form> 
       </div> 
       <ul> 
        <li> 
         <a id="firstlink"> 
          Home 
         </a> 
        </li> 
        <li> 
         <a id="secondlink"> 
          Categories 
         </a> 
        </li> 
        <li> 
         <a id="thirdlink"> 
          Bestsellers 
         </a> 
        </li> 
        <li> 
         <a id="fourthlink"> 
          Contact 
         </a> 
        </li> 
       </ul> 
      </nav> 
     </div> 
    </div> 
</body> 
</html>

CSS：

body{ 

    background-color: #f1f6f6; 
} 

#sidebar{ 
    background-color: #212528; 
    position: fixed; 
    width: 20%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
} 

#nav{ 
    margin: 2em 1em 1em 1em; 
    text-align: right; 
    color: #888888; 
    display: block; 
    max-width: 100%; 
} 

#nav li{ 
    list-style-type: none; 
} 

#searchbar{ 
    padding-bottom: 0.5em; 
    text-align: center; 
} 

#searchbar input{ 
    max-width: 100%; 
} 

#firstlink{ 
    display: block; 
    padding: 0.5em 1.5em 0.5em 1.5em; 
} 

#secondlink{ 
    display: block; 
    padding: 0.5em 1.5em 0.5em 1.5em; 
} 

#thirdlink{ 
    display: block; 
    padding: 0.5em 1.5em 0.5em 1.5em; 
} 

#fourthlink{ 
    display: block; 
    padding: 0.5em 1.5em 0.5em 1.5em; 
}

如果你看一下這個圖片採用鉻合金檢查元素，你可以清楚地看到，李容器不是在中心本身更推向右側div。這裏圖片 - http://i.imgur.com/GfxLGtl.png

的jsfiddle與上面的代碼包括：

https://jsfiddle.net/4pxw4eus/

來源

2015-04-19 SavageSpud

你'nav'有'的text-align：right'。 – lexith

我猜你沒有使用CSS復位，所以你的UL有一些默認的左填充。爲您的ul和li添加可見邊框以更清晰地查看問題：>

來源

2015-04-19 19:56:40 sEver

這實際上是非常有用的，現在它是 - http://i.imgur.com/6DuAlAM.png – SavageSpud

nav下的任何內容都會繼承您的text-align:right;。制定新規則：

#nav >li { text-align:center;}

來源

2015-04-19 19:59:02 kripple

試過了，它並沒有解決它。 – SavageSpud

如果這是您想要完成的。 #nav有一個文本對齊中心，但#nav不是你的UL ID，它只是一個包裝。默認情況下，UL元素有一個填充左側，我已經刪除。你在包裝上設置了一個更大的值來填充左邊的內容。

我還刪除了您的LI元素頂部/底部填充，將其添加到鏈接#nav ul li a，用於UX目的。

希望這是你一直在尋找。祝你好運！

body{ 
 

 
    background-color: #f1f6f6; 
 
} 
 

 
#sidebar{ 
 
    background-color: #212528; 
 
    position: fixed; 
 
    width: 20%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
} 
 

 
#nav{ 
 
    margin: 2em 1em; 
 
    color: #888888; 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 
#nav ul { 
 
    padding-left: 0; 
 
} 
 
#nav li{ 
 
    list-style-type: none; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 
#nav li a { 
 
    display: block; 
 
    padding: 0.5em 0; 
 
} 
 
#searchbar{ 
 
    padding-bottom: 0.5em; 
 
    text-align: center; 
 
} 
 

 
#searchbar input{ 
 
    max-width: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title>Lakeside Books</title> 
 
    <link rel="stylesheet" type="text/css" href="masterstyle.css"> 
 
    <meta name="viewsize" content="width-device-width,initial-scale=1.0"> 
 

 
    <!--[if IE]> 
 
     <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
    <![endif]--> 
 

 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
     <div id="sidebar"> 
 
      <nav id="nav"> 
 
       <div id="searchbar"> 
 
        <form action="http://www.example.com/search.php"> 
 
         <input type="text" name="search" placeholder="Enter Book Title"/> 
 
        </form> 
 
       </div> 
 
       <ul> 
 
        <li> 
 
         <a id="firstlink"> 
 
          Home 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a id="secondlink"> 
 
          Categories 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a id="thirdlink"> 
 
          Bestsellers 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a id="fourthlink"> 
 
          Contact 
 
         </a> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2015-04-19 20:04:03 designarti

這就像一個魅力，這正是我想要的！但是還有一個問題，我怎樣才能讓搜索欄在它的兩邊都有相同的空間？ – SavageSpud

也許這個例子可以幫助你：http://jsfiddle.net/kbw6449r/

#sidebar{ 
    background-color: #212528; 
    position: fixed; 
    width: 20%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
} 

#nav{ 
    margin: 2em 1em 1em 1em; 
    text-align: right; 
    color: #888888; 
    display: block; 
    max-width: 100%; 
} 

#searchbar{ 
    padding-bottom: 0.5em; 
    text-align: center; 
} 

#searchbar input{ 
    max-width: 100%; 
} 

#nav ul { 
    margin: 0; 
    padding: 0; 
} 
#nav li{ 
    list-style: none; 
    width: 100%; 
    text-align: center; 
    padding: 0.5em 0 0.5em 0; 
}

來源

2015-04-19 20:05:47 punctweb

我認爲你需要設置UL填充爲0。看到這個小提琴怎麼看默認填充原因此：

#nav > ul { padding:0; }

http://jsfiddle.net/2p6r0e5x/

來源

2015-04-19 20:06:20 garryp

這可能是很好用，試試吧：

.my-div{ 
    height: 100%; // or whatever 
    width: 100%; // or whatever 
    display: table; 
} 
.my-div p{ 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
}

來源

2015-04-19 20:24:32 shmnsw

Div內的文本卡在右側

回答

相關問題