Question

我无法弄清楚如何让我的div保持在同一条线上。我希望所有图像保持在同一条线上，缩小/缩小尺寸，因为屏幕调整时没有任何溢出或水平滚动。每个图像都是javascript代码将运行以显示隐藏文本的链接。

以下是问题所在的网站：My website

我为我的所有代码创建了一个jsfiddle：jsfiddle code

HTML代码：

<ul class="tab">
  <li>
    <a href="javascript:void(0)" class="tabimg" onclick="openTab(event, 'Newborns')"> 
      <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt=""> 
    </a> 
  </li> 
  <li>
    <a href="javascript:void(0)" class="tabimg" onclick="openTab(event, 'Children')"> 
      <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt="">
     </a>
   </li> 
   <li>
     <a href="javascript:void(0)" class="tabimg" onclick="openTab(event, 'Families')"> 
      <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt=""> 
     </a>
   </li> 
   <li>
      <a href="javascript:void(0)" class="tabimg" onclick="openTab(event, 'Lifestyle')"> 
      <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt=""> 
     </a>
   </li>
</ul>

<div id="Newborns" class="tabcontent">
  <h3>Newborns</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Children" class="tabcontent">
  <h3>Children</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Families" class="tabcontent">
  <h3>Families</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="Lifestyle" class="tabcontent">
  <h3>Lifestyle</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

CSS

/* Style the list */
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    text-align: center;
}

/* Float the list items side by side */
ul.tab li {
    float: left;
}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/*style the images*/
.tabimg{
    max-width: 100%;
    height: auto;
    border: 3px solid blue;
}

我在这里检查了很多问题并搜查了W3schools但是找不到解决方案。

我相信我对容器做错了（对不起，我还是初学者）。

谢谢，

理查德

Answer 1

所有功劳都归功于创建jsfiddle的Tommy Schmidt：jsFiddle created by Tommy

我会发布代码，所以如果链接死了，那么将来可能需要它的人仍然可以得到答案：

<强> HTML：

<ul class="tab">
  <li>
    <a href="#" class="tabimg" data-city-name="Newborns">
      <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt="">
    </a>
  </li>
  <li>
    <a href="#" class="tabimg" data-city-name="Children">
      <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt="">
    </a>
  </li>
  <li>
    <a href="#" class="tabimg" data-city-name="Families">
      <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt="">
    </a>
  </li>
  <li>
    <a href="#" class="tabimg" data-city-name="Lifestyle">
      <img src="http://debora.com.au/wp-content/uploads/revslider/food-carousel/muesli-e1478867936723.jpg" alt="">
    </a>
  </li>
</ul>

<div id="Newborns" class="tabcontent">
  <h3>Newborns</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Children" class="tabcontent">
  <h3>Children</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Families" class="tabcontent">
  <h3>Families</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<div id="Lifestyle" class="tabcontent">
  <h3>Lifestyle</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<强> CSS：

/* Style the list */

ul.tab {
  whitespace: nowrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  text-align: center;
}

/* Style the a tags */
ul.tab li a {
  display: inline-block;
  color: black;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of links on hover */

ul.tab li a:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

ul.tab li a:focus,
.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}


/*style the images*/

.tabimg {
  box-sizing: border-box;
  border: 3px solid blue;
}

.tab {
  font-size: 0; /* To get rid of the space below the li tags */
  display: inline-block;
  /* change this to display: block; in order to make the container as wide as the page is */
  box-sizing: border-box;
  overflow: hidden;
  /* to clear the float */
}

.tab li {
  box-sizing: border-box;
  float: left;
  width: 25%;
}

.tab li a {
  width: 100%; /* remove this if you dont want the images to resize if the container is as wide as the page (if .tab is display: block;*) */
}

.tab li img {
  width: 100%;
  display: block;
  box-sizing: border-box;
}

<强>使用Javascript：

/* Simple foreach as the js foreach method is not supported by IE9 and you may want to support it.
CanIUse: http://caniuse.com/#search=foreach */
function simpleForEach(array, callback) {
  for (var i = 0; i < array.length; i++) {
    callback(array[i], i);
  }
};

/* Parts of this can be done with pure css.
This function should executed on load:
    document.addEventListener("load", load);
or on DOMContentLoaded:
    document.addEventListener("DOMContentLoaded", load);
CanIUse: http://caniuse.com/#search=DOMContentLoaded. */
function load() {
  var tabimgs = document.getElementsByClassName("tabimg");
  // for each tabimg
  simpleForEach(tabimgs, function(tabimg) {
    var cityName = tabimg.getAttribute("data-city-name");
    // add the click event listener
    tabimg.addEventListener("click", function(evt) {
      // onclick do:
      // hide all tabcontents
      simpleForEach(document.getElementsByClassName("tabcontent"), function(tc) {
        tc.style.display = "none";
      });
      // remove the active class
      simpleForEach(document.getElementsByClassName("tabimg"), function(ti) {
        ti.className = ti.className.replace(" active", "");
      });
      // show the current tab, and add "active" class to the link that opened the tab
      document.getElementById(cityName).style.display = "block";
      tabimg.className += " active";
    });
  });
};
// in order to make it work in jsfiddle
load();

响应地调整大小时，将Div保持在同一行

1 个答案: