Question

我试图将徽标和表单放在同一行但不能，因为包含徽标的跨度跨越整条线。如何使其与内容大小相同？

＆＃13;

header {
  text-align: right;
  background-color: #333333;
  border-bottom-width: 1px;
}

.clear {
  display: inline;
  margin-left: 5px;
}

.LogoHeader {
  height: 25%;
  width: 25%;
  border-spacing: 20px;
  vertical-align: middle;
  margin-left: 47px;
}

.SearchForm {
  display: inline;
  padding: 10px 0px;
}

.SearchField {
  display: inline;
  border: none;
  margin: 0;
  line-height: 20px;
  object-position: right;
  margin: 0px 10px white;
}

.SearchButton {
  display: inline;
  background-color: deeppink;
  border-style: none;
  line-height: 20px;
}

＆＃13;

<header>
  <span style="position:relative;float: right; clear: right; width: 100%;"><a href="#website" class="clear"><img class="LogoHeader" src="C:\Users\David\Desktop\WebDevelopmentTest\images\NotWalla\logo.svg" alt="My news website"></a></span>
  <div style="position: relative; vertical-align: middle; right: 50%; display: inline-block; height: -50%">
                <form class="SearchForm">
                    <input class="SearchButton" type="submit" value="Search"><input class="SearchField" type="text" name="q" value autocomplete="off">
                </form>
        </div>
</header>

＆＃13;

Answer 1

您可以从范围样式中删除width: 100%;。

Answer 2

嗯......经过一番乱搞，我能够搞清楚！您无法在下面的代码中看到它，但它确实有效。谢谢大家的帮助。

  header {
  text-align: right;
  background-color: #333333;
  border-bottom-width: 1px;
}

.clear {
  display: inline;
  min-height: 28px;
}

.LogoHeader {
  width: 100%;
  height: 100%
}

.SearchForm {
  display: inline;
  padding: 10px 0px;
  margin-right: 10px;
}

.SearchField {
  border: none;
  line-height: 30px;
  margin: 0px 10px white;
  direction: rtl;
}

.SearchButton {
  background-color: deeppink;
  border-style: none;
  line-height: 30px;

<header style=" border-bottom: 20px solid #333; border-top: 20px solid #333;">
  <div style=" width: 100%; float: right; clear: both; max-width: 303px; margin-right: 10px; transform: translateY(-6px)">
    <a href="#website" class="clear"><img class="LogoHeader" src="C:\Users\David\Desktop\WebDevelopmentTest\images\NotWalla\logo.svg" alt="My news website"></a>
  </div>
  <form class="SearchForm">
    <input class="SearchButton" type="submit" value="Search"><input class="SearchField" type="text" name="q" value autocomplete="off">
  </form>
</header>

如何使跨度与其孩子相同？

2 个答案: