Question

所以我知道这将是一个非常简单的解决方案，但是，我无法理解我的生活。

如何将此导航栏中的字母移至最左侧？

		$(document).ready(function() {
		  $(".letter").click(function(e) {
		    $(".letter").parent().removeClass('current');
		    $(this).parent().addClass('current');

		    var letter = $(this).html().trim();
		    $(".submenuDiv").hide();
		    x = e.clientX - 100;
		    pos = $(this).position();
		    y = pos.top + 50;
		    $("#div" + letter).css({
		      left: x,
		      top: y,
		      position: 'absolute'
		    });
		    $("#div" + letter).show();
		  });
		});

.alphabetNav {
  background-color: #D9DDDF;
}
.alphabetNav li {
  text-decoration: none;
  cursor: pointer;
  float: left;
  display: inline;
  list-style: none;
  background-color: #E9EDEF;
  padding: 3px;
  margin: 2px;
}
.letter:hover {
  color: red;
}
}
.submenuDiv ul {
  display: inline;
}
.submenuDiv ul li {
  float: left;
  list-style: none;
  padding: 5px;
  margin: 10px;
  background-color: #F1F5F7;
  border: solid 1px black;
  border-radius: 10px;
  font-size: 12px;
}
.submenuDiv {
  display: none;
}
.alphabetNav {
  width: 550px;
  height: 27px
}
.noNav li {
  cursor: default;
  color: #ccc
}
li.current {
  background: #fff
}
.alphabetNav li {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<body>
  <ul class='alphabetNav'>
    <li><a class='letter' id='letterA'>A</a>
    </li>
    <li><a class='letter' id='letterB'>B</a>
    </li>
    <li><a class='letter' id='letterC'>C</a>
    </li>
    <ul class='noNav'>
      <li>D</li>
    </ul>
    <li><a class='letter' id='letterE'>E</a>
    </li>
    <ul class='noNav'>
      <li>F</li>
    </ul>
  </ul>

  <!-- Submenu for letter A -->
  <div class='submenuDiv' id='divA'>
    <ul>
      <li>
        Abbotsford-Mission (B.C.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter B -->
  <div class='submenuDiv' id='divB'>
    <ul>
      <li>
        Barrie (Ont.)
      </li>
      <li>
        Brantford (Ont.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter C -->
  <div class='submenuDiv' id='divC'>
    <ul>
      <li>
        Calgary (Alta.)
      </li>
    </ul>
  </div>

  <!-- Submenu for letter D -->
  <div class='submenuDiv' id='divD'>
    <ul>
      <li>
        Apple
      </li>
      <li>
        Artist
      </li>
    </ul>
  </div>

  <!-- Submenu for letter E -->
  <div class='submenuDiv' id='divE'>
    <ul>
      <li>
        Edmonton (Alta.)
      </li>
    </ul>
  </div>
</body>

提前致谢！

Answer 1

您只需要：

.alphabetNav{
    padding-left: 0px;
}

熟悉在浏览器中使用Web Inspector，您将了解解决问题所需的操作。：）

以下是Chrome的快照（绿色部分适用于padding）：

Answer 2

从容器中取出填充物。

.alphabetNav{
    padding:0;
    background-color:#D9DDDF;
}

或者只是左侧填充。

.alphabetNav{
    padding-left:0;
    background-color:#D9DDDF;
}

Answer 3

在alphabetNav上将填充设置为0

如何在导航栏中将内容移至左侧

3 个答案: