以特定方式对齐水平列表中的图像

时间：2015-08-05 05:07:18

标签： javascript jquery html css image

自动将水平列表中的图像与第一个元素对齐，左对齐，最后一个元素右对齐，中间图像在两者之间均匀对齐。

我有3张图像的水平列表，我希望图像如上所述对齐。此处给出了示例HTML Snap shot 

<div id="nav">
<div class="header-row">
     <div class="title">Widget Title</div>
     <div class="action">See more</div>
</div>
<ul>
    <li><img src="images/kranznav.png" alt="kranz" /><a href="index.php">COM</a></li>
    <li><img src="images/thumbnav.png" alt="thumb" /><a href="index.php">SCO</a></li>
    <li><img src="images/bagnav.png" alt="bag" /><a href="index.php">SHO</a></li>
</ul>
</div>
<div class="clear">
</div>

#nav {
    background:#ffffff;
    width:100%;
    margin-top:2em;  
    margin-left: 2rem;
    margin-right: 5rem;
}

#nav .header-row {
    vertical-align: middle;
    height: 2.32rem;
    padding-top: .56rem;
    padding-bottom: 0.56rem;
}
#nav .title {
    font-size: .88rem !important;
    float: left;
}
#nav .action {
    float: right;
    font-size: .64rem;
    padding-right: 5rem;
}
#nav ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
}
#nav li {
    display:inline;
    float: left;
    text-align: center;
    margin: 0 auto;
}

#nav li:first-child{
    float:left;
    padding-left: 0;
}

#nav li:last-child{
    float:right;
    padding-right:5rem;
}

#nav a {
    display:block;
    width:20%;
    margin-right:0% auto;
    padding-left:0% auto;
    color:#5E09CB;
    text-decoration:none;

}

我努力让中间的图像与中心对齐。我已经尝试过margin：0 auto，但它似乎没有指定宽度而工作，在这种情况下我无法对宽度进行硬编码，因为它可能因布局和分辨率而异。

所以我尝试动态设置宽度（通过java脚本），并且中间元素没有在可用空间中居中。

5 个答案:

答案 0 :(得分：1)

如果尝试使用display：inline-block和text-align：justify？

，该怎么办？ 
<div id="nav">
<div class="header-row">
     <div class="title">Widget Title</div>
     <div class="action">See more</div>
</div>
<ul>
    <li><img src="images/kranznav.png" alt="kranz" /><a href="index.php">COM</a></li>
    <li><img src="images/thumbnav.png" alt="thumb" /><a href="index.php">SCO</a></li>
    <li><img src="images/bagnav.png" alt="bag" /><a href="index.php">SHO</a></li>

</ul>
</div>
<div class="clear">

CSS 

 #nav {
        background:#cccccc;
        margin-top:2em;  
        margin-left: 2rem;
        margin-right: 5rem;
    }

    #nav .header-row {
        vertical-align: middle;
        height: 2.32rem;
        padding-top: .56rem;
        padding-bottom: 0.56rem;
    }
    #nav .title {
        font-size: .88rem !important;
        float: left;
    }
    #nav .action {
        float: right;
        font-size: .64rem;
        padding-right: 5rem;
    }
    #nav ul {
        list-style-type:none;
        margin: 0;
        padding: 0;
        text-align: justify;
        border: solid 1px red;
        width: 100%;
    }
    #nav li {
        display:inline-block;
        border: solid 1px black;
      }

    #nav ul:after {
        content: "";
        width: 100%;
        display: inline-block;
        }



    #nav a {

        text-decoration:none;

    }

小提琴演示：http://jsfiddle.net/er3t4u8v/4/

答案 1 :(得分：0)

HI @VIz现在您已经习惯了table 属性，就像这样

现在定义您的ul代码display table 属性

您li代码display table-cell 属性

示例 

#nav ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    display:table;
    width:100%;
}
#nav li {
    display:table-cell;
    text-align: center;
}


#nav a {
    display:block;
    color:#5E09CB;
    text-decoration:none;

}

演示 

#nav {
    background:#ffffff;
    margin-top:2em;  
    margin-left: 2rem;
    margin-right: 5rem;
}

#nav .header-row {
    vertical-align: middle;
    height: 2.32rem;
    padding-top: .56rem;
    padding-bottom: 0.56rem;
}
#nav .title {
    font-size: .88rem !important;
    float: left;
}
#nav .action {
    float: right;
    font-size: .64rem;
    padding-right: 5rem;
}
#nav ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    display:table;
    width:100%;
}
#nav li {
    display:table-cell;
    text-align: center;
}


#nav a {
    display:block;
    color:#5E09CB;
    text-decoration:none;

}
<div id="nav">
<div class="header-row">
     <div class="title">Widget Title</div>
     <div class="action">See more</div>
</div>
<ul>
    <li><img src="https://www.gravatar.com/avatar/59282562ee769ff6143e7e5024c4b115?s=32&d=identicon&r=PG&f=1" alt="kranz" /><a href="index.php">COM</a></li>
    <li><img src="https://www.gravatar.com/avatar/59282562ee769ff6143e7e5024c4b115?s=32&d=identicon&r=PG&f=1" alt="thumb" /><a href="index.php">SCO</a></li>
    <li><img src="https://www.gravatar.com/avatar/59282562ee769ff6143e7e5024c4b115?s=32&d=identicon&r=PG&f=1" alt="bag" /><a href="index.php">SHO</a></li>
</ul>
</div>
<div class="clear">
</div>

=======================================

第二个选项

现在习惯了这个

#nav ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    display:block;font-size:0;
}
#nav li:first-child{
    text-align:left;
}
#nav li:last-child{
    text-align:right;
}
#nav li {
    display:inline-block;vertical-align:top;
    width:33.33%;
    text-align: center;
    font-size:12px;
}

<强> Demo Jsfiddle Link

答案 2 :(得分：0)

您只需要使用＆＃34; float＆＃34;正常。

＆＃13;
＆＃13; 
img {
  width: 120px;
}

li {
  float: left;
}
＆＃13; 
<div id="nav">
<div class="header-row">
     <div class="title">Widget Title</div>
     <div class="action">See more</div>
</div>
<ul>
    <li><img src="https://s3.amazonaws.com/static.carthrottle.com/workspace/uploads/comments/fan-54ce422962b1a.jpg" alt="kranz" /><a href="index.php">COM</a></li>
    <li><img src="https://s3.amazonaws.com/static.carthrottle.com/workspace/uploads/comments/fan-54ce422962b1a.jpg" alt="thumb" /><a href="index.php">SCO</a></li>
    <li><img src="https://s3.amazonaws.com/static.carthrottle.com/workspace/uploads/comments/fan-54ce422962b1a.jpg" alt="bag" /><a href="index.php">SHO</a></li>
</ul>
</div>
<div class="clear">
</div>
＆＃13;
＆＃13;
＆＃13;

创建一个我通常称之为＆＃34; clearboy＆＃34;的课程是一种很好的做法。它应该是这样的：

.clearboy {
 clear: both;
}

您可以在每个浮动元素下放置一个<div class="clearboy"/>，以便浮动表现为＆＃34; normal＆＃34;再次。我认为你的<div class="clear">就是这样做的。

您也可以找到有用的this示例。

进一步阅读：

完整代码：

＆＃13;
＆＃13; 
img {
  width: 120px;
}

li {
  float: left;
}

#nav {
    background:#ffffff;
    width:100%;
    margin-top:2em;  
    margin-left: 2rem;
    margin-right: 5rem;
}

#nav .header-row {
    vertical-align: middle;
    height: 2.32rem;
    padding-top: .56rem;
    padding-bottom: 0.56rem;
}
#nav .title {
    font-size: .88rem !important;
    float: left;
}
#nav .action {
    float: right;
    font-size: .64rem;
    padding-right: 5rem;
}
#nav ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
}
#nav li {
    display:inline;
    float: left;
    text-align: center;
    margin: 0 auto;
}

#nav a {
    display:block;
    width:20%;
    margin-right:0% auto;
    padding-left:0% auto;
    color:#5E09CB;
    text-decoration:none;

}
＆＃13; 
<div id="nav">
    <div class="header-row">
         <div class="title">Widget Title</div>
         <div class="action">See more</div>
    </div>
    <ul>
        <li><img src="https://s3.amazonaws.com/static.carthrottle.com/workspace/uploads/comments/fan-54ce422962b1a.jpg" alt="kranz" /><a href="index.php">COM</a></li>
        <li><img src="https://s3.amazonaws.com/static.carthrottle.com/workspace/uploads/comments/fan-54ce422962b1a.jpg" alt="thumb" /><a href="index.php">SCO</a></li>
        <li><img src="https://s3.amazonaws.com/static.carthrottle.com/workspace/uploads/comments/fan-54ce422962b1a.jpg" alt="bag" /><a href="index.php">SHO</a></li>
    </ul>
＆＃13;
＆＃13;
＆＃13;

如果您只想将右侧图像粘贴到窗口的右边框，您可以这样做：

＆＃13;
＆＃13; 
img {
  width: 120px;
}

li {
  display: block;
}

#nav {
    background:#ffffff;
    width:100%;
    margin-top:2em;  
    margin-left: 2rem;
    margin-right: 5rem;
}

#nav .header-row {
    vertical-align: middle;
    height: 2.32rem;
    padding-top: .56rem;
    padding-bottom: 0.56rem;
}
#nav .title {
    font-size: .88rem !important;
    float: left;
}
#nav .action {
    float: right;
    font-size: .64rem;
    padding-right: 5rem;
}
#nav ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
}
#nav li {
    display:inline;
    float: left;
    text-align: center;
    margin: 0 auto;
}

#nav a {
    display:block;
    width:20%;
    margin-right:0% auto;
    padding-left:0% auto;
    color:#5E09CB;
    text-decoration:none;

}

li:first-child {
  margin-left:0;
  margin-right:auto;
  width: 33%;
}

li:first-child img {
  float: left;
}

li:nth-child(2) {
  margin-left: auto;
  margin-right: auto;
  width: 33%
}

li:last-child {
  margin-left: auto;
  margin-right: 0;
  width: 33%;
}
＆＃13; 
<div id="nav">
    <div class="header-row">
         <div class="title">Widget Title</div>
         <div class="action">See more</div>
    </div>
    <ul>
        <li><img src="https://s3.amazonaws.com/static.carthrottle.com/workspace/uploads/comments/fan-54ce422962b1a.jpg" alt="kranz" /><a href="index.php">COM</a></li>
        <li><img src="https://s3.amazonaws.com/static.carthrottle.com/workspace/uploads/comments/fan-54ce422962b1a.jpg" alt="thumb" /><a href="index.php">SCO</a></li>
        <li><img src="https://s3.amazonaws.com/static.carthrottle.com/workspace/uploads/comments/fan-54ce422962b1a.jpg" alt="bag" /><a href="index.php">SHO</a></li>
    </ul>
＆＃13;
＆＃13;
＆＃13;

请注意以下CSS行：

li:first-child {
  margin-left:0;
  margin-right:auto;
  width: 33%;
}

li:first-child img {
  float: left;
}

li:nth-child(2) {
  margin-left: auto;
  margin-right: auto;
  width: 33%
}

li:last-child {
  margin-left: auto;
  margin-right: 0;
  width: 33%;
}

答案 3 :(得分：0)

你可以这样使用 -

＆＃13;
＆＃13; 
	#nav {
    background:#ffffff;
    /*width:100%;*/
    margin-top:2em;  
    margin-left: 2rem;
    margin-right: 5rem;

}
#nav li img{
	display: block;
	margin: 0 auto;
}

#nav .header-row {
    vertical-align: middle;
    height: 2.32rem;
    padding-top: .56rem;
    padding-bottom: 0.56rem;
}
#nav .title {
    font-size: .88rem !important;
    float: left;
}
#nav .action {
    float: right;
    font-size: .64rem;
    /*padding-right: 5rem;*/
}
#nav ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
}
#nav li {
    display:inline;
    float: left;
    text-align: center;
    width: 80%;
}

#nav li:first-child{
    float:left;
    padding-left: 0;
    width: 10%;
}

#nav li:last-child{
    float:right;
    /*padding-right:5rem;*/
    width: 10%;
}

#nav a {
    display:block;
    /*width:20%;*/
    margin-right:0% auto;
    padding-left:0% auto;
    color:#5E09CB;
    text-decoration:none;

}
＆＃13; 
<div id="nav">
	<div class="header-row">
	     <div class="title">Widget Title</div>
	     <div class="action">See more</div>
	</div>
	<ul>
	    <li><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRcirYtkcgdoZeg7LaZ_lub1cdv0I9FgYcwkZVSkY_c6Vs4gbZ0GOvsrQ" alt="kranz" /><a href="index.php">COM</a></li>
	    <li><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRcirYtkcgdoZeg7LaZ_lub1cdv0I9FgYcwkZVSkY_c6Vs4gbZ0GOvsrQ" alt="thumb" /><a href="index.php">SCO</a></li>
	    <li><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRcirYtkcgdoZeg7LaZ_lub1cdv0I9FgYcwkZVSkY_c6Vs4gbZ0GOvsrQ" alt="bag" /><a href="index.php">SHO</a></li>
	</ul>
</div>
	<div class="clear"></div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

可以使用flexbox吗？以下示例可根据需要进行调整！ ：）

http://codepen.io/praveenpuglia/pen/qdgaVa 

* {
  box-sizing: border-box;
}
.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.left,
.center,
.right {
  height: 200px;
  background: #bada55;
}
.left,
.right {
  width: 20%;
  margin: 20px;
}
.center {
  background: #ff0066;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  width: 50%;
}
<div class="wrapper">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

相关问题
最新问题