Question

我有一个边框，围绕一张宽500像素，高400像素的图片上方的超短两行文字。有没有办法控制边框的长度，所以它只有500px的长度，使它排在图片的正上方？我没有使用div，我尝试了边框长度：500px但是这不起作用，当我累了边框宽度：500px它只是弄乱了它。我只是希望文本周围的边框与图片的长度相同，以使其看起来更干净。（我也知道可能有更多更清洁的方式来做我的风格，但我想尽可能保持我的格式！）提前谢谢!!

＆＃13;

h2.border {
  border-top: 3px dotted #e5e5e5;
  border-bottom: 3px dotted #e5e5e5;
  box-shadow: inset 0 -1px 0 0 #e5e5e5, inset 0 1px 0 0 #e5e5e5, 0 1px 0 0 #e5e5e5, 0 -1px 0 0 #e5e5e5;
  margin-bottom: 1px;
}

h3.border {
  border-top: 3px dotted #e5e5e5;
  border-bottom: 3px dotted #e5e5e5;
  box-shadow: inset 0 -1px 0 0 #e5e5e5, inset 0 1px 0 0 #e5e5e5, 0 1px 0 0 #e5e5e5, 0 -1px 0 0 #e5e5e5;
  margin-bottom: 1px;
}

h4.dotted {
  border-style: dotted;
  border-length: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow39.js"></script>

<BODY bgColor="#87CEFA">
  <div id="wrapper">
    <section id="top area">
      <article class="box-right">
        <form action="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/search.php" method="post">
          <Center>
            <h2 class="border"> Search for Content</h2>
            <p>
              <label>Category (Dog, cat, Hamster):</label>
              <input name="category" placeholder="Dog, cat, hamster" type="text">
            </p>
            <!-- Changed Animal type to Animal size(animal_size)-->
            <p>
              <label>Animal size (Large, Small, Small, Tiny/Dawf):</label>
              <input name="animal_size" placeholder="Dawf Hamster" type="text">
            </p>
            <p>
              <input value="Submit" type="submit">
            </p>
            <a href="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/FinalPro_Main.html">
					Return to Main page </a>
            </br>
            <h3 class="border"> Pictures of a few animals we have right now</h3>
            <h4 class="dotted"> Large Dog </br> Name: Tiny</h4>
            <img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/bigdog.jpg" alt="Big Dog" Style="width:500px;height:400px;"></br>
            <h4 class="dotted"> Small Dog </br> Name: Yippy</h4>
            <img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/smalldog.jpg" alt="Small Dog" Style="width:400px;height:600px;"></br>
            <h4 class="dotted"> Small Cat </br> Name: Teddy</h4>
            <img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/smallcat.jpeg" alt="Small Cat" Style="width:400px;height:600px;"></br>
            <h4 class="dotted"> Small Hamster </br> Name: Digger</h4>
            <img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/dawfhamster.jpg" alt="Small hamster" Style="width:400px;height:600px;">
            </br>
            </br>
            <a href="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/FinalPro_Main.html">
				Return to Main page </a>
          </center>
        </form>
      </article>
    </section>
  </div>
</body>

＆＃13;

Answer 1

您是否尝试过使用width: 500px;而不是border-？另外，您是否希望所有这些标题文本具有相同的宽度？因为它看起来像你的第二张，第三张和第四张图片的宽度都不同于第一幅。

Answer 2

实际上你需要控制的是文本容器的大小。这样边框就会占用那个空间，因为你的imgs上有一个固定的width，你可以对容器做同样的事情并使用自动边距来保持中心：

＆＃13;

h2.border {
  border-top: 3px dotted #e5e5e5;
  border-bottom: 3px dotted #e5e5e5;
  box-shadow: inset 0 -1px 0 0 #e5e5e5, inset 0 1px 0 0 #e5e5e5, 0 1px 0 0 #e5e5e5, 0 -1px 0 0 #e5e5e5;
  margin-bottom: 1px;
}

h3.border {
  border-top: 3px dotted #e5e5e5;
  border-bottom: 3px dotted #e5e5e5;
  box-shadow: inset 0 -1px 0 0 #e5e5e5, inset 0 1px 0 0 #e5e5e5, 0 1px 0 0 #e5e5e5, 0 -1px 0 0 #e5e5e5;
  margin-bottom: 1px;
}

h4.dotted {
  border-style: dotted;
  max-width:500px;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow39.js"></script>

<BODY bgColor="#87CEFA">
  <div id="wrapper">
    <section id="top area">
      <article class="box-right">
        <form action="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/search.php" method="post">
          <Center>
            <h2 class="border"> Search for Content</h2>
            <p>
              <label>Category (Dog, cat, Hamster):</label>
              <input name="category" placeholder="Dog, cat, hamster" type="text">
            </p>
            <!-- Changed Animal type to Animal size(animal_size)-->
            <p>
              <label>Animal size (Large, Small, Small, Tiny/Dawf):</label>
              <input name="animal_size" placeholder="Dawf Hamster" type="text">
            </p>
            <p>
              <input value="Submit" type="submit">
            </p>
            <a href="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/FinalPro_Main.html">
					Return to Main page </a>
            </br>
            <h3 class="border"> Pictures of a few animals we have right now</h3>
            <h4 class="dotted"> Large Dog </br> Name: Tiny</h4>
            <img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/bigdog.jpg" alt="Big Dog" Style="width:500px;height:400px;"></br>
            <h4 class="dotted"> Small Dog </br> Name: Yippy</h4>
            <img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/smalldog.jpg" alt="Small Dog" Style="width:400px;height:600px;"></br>
            <h4 class="dotted"> Small Cat </br> Name: Teddy</h4>
            <img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/smallcat.jpeg" alt="Small Cat" Style="width:400px;height:600px;"></br>
            <h4 class="dotted"> Small Hamster </br> Name: Digger</h4>
            <img src="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/dawfhamster.jpg" alt="Small hamster" Style="width:400px;height:600px;">
            </br>
            </br>
            <a href="http://sarahmcintosh.x10host.com/Sarah%20McIntosh%20CS0334/Lab%20Assignments/Lab%2010/Lab%2010/FinalPro_Main.html">
				Return to Main page </a>
          </center>
        </form>
      </article>
    </section>
  </div>
</body>

＆＃13;

Answer 3

使用此功能可以轻松实现500px的边框：

h4.dotted {
  border-style: dotted;
  max-width: 500px;
}

这会解决您的问题吗？希望这会有所帮助。

Answer 4

你说：

有没有办法控制边框的长度，所以它只有500px 长度使它排在画面上方？

假设您希望该广告框的宽度为500像素，请为h4.dotted执行此操作：

h4.dotted {
  border-style: dotted;
  width: 500px;
  box-sizing: border-box;
}

CSS边界长度控制没有Div

4 个答案: