Javascript 位置：绝对和左侧：0未将ul置于左侧_Javascript_Html_Css_Web

Javascript 位置：绝对和左侧：0未将ul置于左侧

javascript html css web

Javascript 位置：绝对和左侧：0未将ul置于左侧,javascript,html,css,web,Javascript,Html,Css,Web,这是我的html，我只想让我的下拉列表移到屏幕左侧。我已使用内联样式设置绝对位置和左：0，但它不起作用。请帮助我，以便我继续了解更多信息。我已经使用引导程序制作了这个导航栏，并尝试使用绝对定位，但它不起作用？？不知道为什么旅游 //导航栏 //这是我想移到屏幕左侧的下拉列表发射大多数浏览器在ul元素上都有一些默认的padding（例如，在Chrome中是40px）。您可以将其设置为0，将列表项一直向左移动，或稍微向左移动一点，以便仍然可以看到列表标记

这是我的html，我只想让我的下拉列表移到屏幕左侧。我已使用内联样式设置绝对位置和左：0，但它不起作用。请帮助我，以便我继续了解更多信息。 我已经使用引导程序制作了这个导航栏，并尝试使用绝对定位，但它不起作用？？不知道为什么


旅游
//导航栏





//这是我想移到屏幕左侧的下拉列表











发射

大多数浏览器在

ul

元素上都有一些默认的

padding

（例如，在Chrome中是

40px

）。您可以将其设置为

，将列表项一直向左移动，或稍微向左移动一点，以便仍然可以看到列表标记

首先，您拼写错误了

位置。它应该是position
。可能id=下拉列表元素使用style-position:relativeJust-update我已经更正了position的拼写，但仍然无法使用X超级用户
<!Doctype html>
    <html>
    <meta charset="utf-8">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="description" content="">
        <meta name="author" content="">
        <title>
    Tours and Travels
    </title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">


    </head>

       //navigation bar
    <body>
    <header class ="navbar-inverse navbar-fixed-top" >
    <div class="container-fluid">
      <nav role="navigation">
       <!-- Brand and toggle get grouped for better mobile display -->


        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav"  >
            <li class="active"><a href="./index.html">Home<span class="sr-only">(current)</span></a></li>
            <li><a href="#">About Us</a></li>
            <li class="dropdown"  >
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Packages <span class="caret"></span></a>
              <ul class="dropdown-menu" style="positon:absolute; left:0;">
               //this is dropdown i want to move to the left of the screen

                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">One more separated link</a></li>




              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right" style="padding:0.5%;" >
            <li><button  type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
      Launch</button></li>

          </ul>
        </div><!-- /.navbar-collapse -->
      </nav>
    </div>
    </header>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
     </body>
        </html>