Question

当我将下面的UI元素向右浮动时。宽度不再保持100％在整个页面上拉伸。下面是我的HTML和CSS代码。

<!DOCTYPE html>
<html>
<head>
    <title>AI</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <div id="main-container">       
        <div id="image">
            <div id="nav-bar">
                <ul>
                    <li>Home</li>
                    <li>Team</li>
                    <li>About us</li>
                    <li>Contact us</li>
                </ul>           
            </div>
            <img src="D75_9070.jpg">
        </div>
    </div>
</body>
</html>

CSS

#main-container {
background-color: black;
position: fixed;
height: 100%;
width: 100%;
}

body {
    margin: 0;
    padding: 0;
}

img {
    display: block;
    max-height: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#nav-bar {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 100%;
}

ul {
    margin: 10px;
    padding: 20px;
    background-color: white;

}

li {
    padding-left: 20px;
    padding-right: 20px;
    list-style: none;
    display: inline;
}

Answer 1

如果一个元素的宽度为100％，那么浮动则没有意义（大多数没有意义）。

对于旨在拉伸整个宽度的东西，浮动它会使父容器崩溃，但在将内容移动到一侧或另一侧方面不会有任何影响。

我认为你在寻找的是这个。

#nav-bar ul {
    float:right;
}

Answer 2

您可以在浮动#nav-bar的同时将背景颜色设置为ul，而不是#main-container { background-color: black; position: fixed; height: 100%; width: 100%; } body { margin: 0; padding: 0; } img { display: block; max-height: 100%; max-width: 100%; margin-left: auto; margin-right: auto; } #nav-bar { position: fixed; top: 10px; left: 10px; right: 10px; background-color: white; } ul { margin: 10px; padding: 20px; float: right; } li { padding-left: 20px; padding-right: 20px; list-style: none; display: inline; }。

＆＃13;

<div id="main-container">       
  <div id="image">
    <div id="nav-bar">
      <ul>
        <li>Home</li>
        <li>Team</li>
        <li>About us</li>
        <li>Contact us</li>
      </ul>           
    </div>
    <img src="http://lorempixel.com/50/50/animals">
  </div>
</div>

＆＃13;

   @IBOutlet weak var gameSpace: UIView!
   var gsWidth: CGFloat = 0
   var gsHeight: CGFloat = 0

  let gsSize: CGRect = gameSpace.bounds
  gsWidth = gsSize.width 
  gsHeight = gsSize.height

＆＃13;

Answer 3

简单地将ul添加到ul { margin: 10px; padding: 20px; background-color: white; text-align: right; }

{{1}}

<强> Working Fiddle

无法以100％宽度向右浮动导航栏

3 个答案: