使用浮动的项目没有正确排列

Question

我有 html 下面的页面 in-line css。（现在正在做 in-line，而我 fiddle 用它来避免在文件之间切换）。我试图让 ViewBag.Title 和按钮项位于同一行。我想要页面左侧的标题和页面右侧的按钮项。目前它们在页面的正确两侧，但按钮高于页面标题而不是在同一行。

/*#region*/

html,
body {
  width: 100%;
  height: 100%;
}
.web-header {
  font-family: 'Josefin Slab', serif;
  padding: 10px 0px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-shadow: #fff 0px 1px 0, #000 0 -1px 0;
  line-height: 3em;
  font-size: 3em;
  font-weight: bold;
  color: #339900;
}
.logo-image,
.home-image {
  float: left;
  margin: 7px 20px 0px 0px;
}
.home-image {
  max-width: 250px;
}
.clear-fix:after {
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
body {
  color: #333;
  font-size: .85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  overflow: auto;
  background-image: url("../Images/GreenBackGround.jpg");
}
#body-content {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.box-effect {
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  width: 90%;
  padding-bottom: 25px;
  background-color: #FFF;
  background: rgba(255, 255, 255, 1.0);
  border-radius: 15px;
}
.title {
  margin-bottom: 20px;
}
.content-wrapper {
  margin: 0 auto;
  max-width: 100%;
}
#follow-icons {
  padding-right: 20px;
  padding-top: 13px;
  float: right;
}
.content-align {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/*#endregion*/

/*#region*/

h1 {
  font-size: 2em;
  color: #000;
  margin-bottom: 0;
  padding-bottom: 0;
}
h2 {
  font-size: 1.75em;
  color: #000;
  margin-bottom: 0;
  padding-bottom: 0;
}
h3 {
  font-size: 1.2em;
  color: #000;
  margin-bottom: 0;
  padding-bottom: 0;
}
h4 {
  font-size: 1.1em;
  color: #000;
  margin-bottom: 0;
  padding-bottom: 0;
}
h5,
h6 {
  font-size: 1em;
  color: #000;
  margin-bottom: 0;
  padding-bottom: 0;
}
h5 a:link,
h5 a:visited,
h5 a:active {
  padding: 0;
  text-decoration: none;
}
/*#endregion*/

/*#region*/

.rmm {
  display: block;
  position: relative;
  width: 100%;
  padding: 0px;
  margin: 0 auto !important;
  text-align: center;
  line-height: 19px !important;
}
.rmm * {
  -webkit-tap-highlight-color: transparent !important;
  font-family: Arial;
}
.rmm a {
  color: #ebebeb;
  text-decoration: none;
}
.rmm .rmm-main-list,
.rmm .rmm-main-list li {
  margin: 0px;
  padding: 0px;
}
.rmm ul {
  display: block;
  width: auto !important;
  margin: 0 auto !important;
  overflow: hidden;
  list-style: none;
}
/* sublevel menu - in construction */

.rmm ul li ul,
.rmm ul li ul li,
.rmm ul li ul li a {
  display: none !important;
  height: 0px !important;
  width: 0px !important;
}
.rmm .rmm-main-list li {
  display: inline;
  padding: 0px;
  margin: 0px !important;
}
.rmm-toggled {
  display: none;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: 0 auto !important;
}
.rmm-button:hover {
  cursor: pointer;
}
.rmm .rmm-toggled ul {
  display: none;
  margin: 0px !important;
  padding: 0px !important;
}
.rmm .rmm-toggled ul li {
  display: block;
  margin: 0 auto !important;
}
/* GRAPHITE STYLE */

.rmm.graphite .rmm-main-list li a {
  display: inline-block;
  padding: 8px 30px 8px 30px;
  margin: 0px -3px 0px -3px;
  font-size: 15px;
  text-shadow: 1px 1px 1px #333333;
  background-color: #444444;
  border-left: 1px solid #555555;
  background-image: url('../Images/BorderImages/graphite-menu-bg.png');
  background-repeat: repeat-x;
}
.rmm.graphite .rmm-main-list li a:hover {
  background-image: url('../Images/BorderImages/graphite-menu-bg-hover.png');
}
.rmm.graphite .rmm-main-list li:first-child a {
  -webkit-border-top-left-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.rmm.graphite .rmm-main-list li:last-child a {
  -webkit-border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-radius-topright: 6px;
  -moz-border-radius-bottomright: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.rmm.graphite .rmm-toggled {
  width: 95%;
  background-color: #555555;
  min-height: 36px;
  border-radius: 6px;
}
.rmm.graphite .rmm-toggled-controls {
  display: block;
  height: 36px;
  color: white;
  text-align: left;
  position: relative;
  background-image: url('../Images/BorderImages/graphite-menu-bg.png');
  background-repeat: repeat-x;
  border-radius: 6px;
}
.rmm.graphite .rmm-toggled-title {
  position: relative;
  top: 9px;
  left: 15px;
  font-size: 16px;
  color: white;
  text-shadow: 1px 1px 1px black;
}
.rmm.graphite .rmm-button {
  display: block;
  position: absolute;
  right: 15px;
  top: 8px;
}
.rmm.graphite .rmm-button span {
  display: block;
  margin-top: 4px;
  height: 2px;
  background: white;
  width: 24px;
}
.rmm.graphite .rmm-toggled ul li a {
  display: block;
  width: 100%;
  background-color: #555555;
  text-align: center;
  padding: 10px 0px 10px 0px;
  border-bottom: 1px solid #333333;
  border-top: 1px solid #777777;
  text-shadow: 1px 1px 1px #333333;
}
.rmm.graphite .rmm-toggled ul li a:active {
  background-color: #444444;
  border-bottom: 1px solid #444444;
  border-top: 1px solid #444444;
}
/* MINIMAL STYLE */

.rmm.minimal a {
  color: #333333;
}
.rmm.minimal a:hover {
  opacity: 0.7;
}
.rmm.minimal .rmm-main-list li a {
  display: inline-block;
  padding: 8px 30px 8px 30px;
  margin: 0px -3px 0px -3px;
  font-size: 15px;
}
.rmm.minimal .rmm-toggled {
  width: 95%;
  min-height: 36px;
}
.rmm.minimal .rmm-toggled-controls {
  display: block;
  height: 36px;
  color: #333333;
  text-align: left;
  position: relative;
}
.rmm.minimal .rmm-toggled-title {
  position: relative;
  top: 9px;
  left: 9px;
  font-size: 16px;
  color: #333333;
}
.rmm.minimal .rmm-button {
  display: block;
  position: absolute;
  right: 9px;
  top: 7px;
}
.rmm.minimal .rmm-button span {
  display: block;
  margin: 4px 0px 4px 0px;
  height: 2px;
  background: #333333;
  width: 25px;
}
.rmm.minimal .rmm-toggled ul li a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 0px 10px 0px;
  border-bottom: 1px solid #dedede;
  color: #333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
  border-top: 1px solid #dedede;
}
/*#endregion*/

/***About and Current Styles****/

.products {
  width: 100%;
  padding: 10px;
  float: left;
}
.products a {
  color: #000;
}
/*#region*/

@media (max-width: 350px) {
  #follow-icons {
    display: none;
  }
  .home-image {
    width: 100%;
  }
  .my-photo {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 502px) {
  #follow-icons {
    float: left;
    margin-top: 10px;
    margin-bottom: 20px;
  }
}
@media (max-width: 700px) {
  #home-table {
    float: left;
  }
  .home-image {
    margin: auto;
    float: none;
  }
}
@media (max-width: 733px) {
  .sTableInfo {
    display: none;
  }
  #sTableImage {
    width: 100%;
    text-align: center;
  }
}
@media (min-width: 733) and (max-width: 912px) {
  #sponsor-div {
    width: 100%;
  }
  #sponsorTable {
    width: 100%;
  }
}
@media (max-width: 775px) {
  #tournamentTable {
    display: none;
  }
  #tourneyNotifications {
    display: block;
  }
}
@media (min-width: 776px) {
  #tourneyNotifications {
    display: none;
  }
}
@media (min-width: 913px) {
  #sponsorTable {
    width: 740px;
  }
}
@media (max-width: 913px) {
  .VidCol1 {
    display: none;
  }
}
@media (max-width: 920px) {
  .tTableLocation {
    display: none;
  }
}
@media (max-width: 1003px) {
  .tTableEntries {
    display: none;
  }
}
/*#endregion*/

<div class="title">
  <div>
    <h1 style="float: left">Patients</h1>
  </div>
  <div class="rmm" style="float: right; display: inline-block">
    <ul>
      <li><a href="javascript:void(0)" class="NewItem">New Patient</a>
      </li>
      <li><a href="javascript:void(0)" class="DeleteLink">Delete Patient(s)</a>
      </li>
    </ul>
  </div>
</div>
<div class="products">
</div>

Answer 1

将 margin-top:3px 添加到 class rmm。

见http://jsfiddle.net/ndyqqxxw/2/

Answer 2

试试这个 codepen http://codepen.io/anon/pen/myWjzx

CSS

.title {
  width:100%;
  height:100px;
  background:#d7d7d7;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.rmm {
  background:#a7a7a7;
  width:auto;
  padding:0px 10px;
}
ul {
  list-style:none;
}
li {
  float:left;
  margin:0px 12px;
}

使用浮动的项目没有正确排列

Items using float are not lining up properly

html

css

css-float