Question

我试图在反馈星之间增加空间（例如15px）。有两件事需要考虑我不仅要为灰色星（背景图像）添加边距，还要为黄金星（i元素）添加边距。我怎样才能实现这个尝试margin-left，但没有运气，图像是svg，也许我应该在图像中添加一些空间，但这似乎是一个非常原始的想法，任何建议？

＆＃13;

.star-rating {
  font-size: 0;
  white-space: nowrap;
  display: inline-block;
  width: 250px;
  height: 50px;
  overflow: hidden;
  position: relative;
  background: url('greyStar.svg');
  background-size: contain;
}

.star-rating i {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  z-index: 1;
  background: url('goldenStar.svg');
  background-size: contain;
}

＆＃13;

<span class="star-rating">
    <a href="">
        <input type="radio" name="rating" value="1" id='input1'>
        <i></i>
    </a>
    
    <a href="">
        <input type="radio" name="rating" value="2" id='input2' >
    	<i></i>
    </a>
</div>

＆＃13;

以下是完整示例：http://codepen.io/nikasv/pen/dMWgrZ

Answer 1

您需要调整两个元素的背景大小

＆＃13;

.star-rating {
  font-size: 0;
  white-space: nowrap;
  display: inline-block;
  width: 400px;
  height: 50px;
  overflow: hidden;
  position: relative;
  background:url('http://imgh.us/greyStar.svg');
  background-size: 20% 100%;
}
.star-rating input {
  -moz-appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  display: inline-block;
  width: 20%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  position: relative;
}
.star-rating i {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  z-index: 1;
  background:url('http://imgh.us/goldenStar.svg');  
  background-size: 100% 100%;
}
.star-rating input:hover + i,
.star-rating input:checked + i {
  opacity: 1;
}
.star-rating #input2 + i {
  width: 40%;
  background-size: 50% 100%;
}
.star-rating #input3 + i {
  width: 60%;
  background-size: 33% 100%;
}
.star-rating #input4 + i {
  width: 80%;
  background-size: 25% 100%;
}
.star-rating #input5 + i {
  width: 100%;
  background-size: 20% 100%;
}

＆＃13;

<div class="star-rating">
	    <a href="">
	    	<input type="radio" name="rating" value="1" id='input1'>
	    	  <i></i>
	    </a>

	    <a href="">
	    	<input type="radio" name="rating" value="2" id='input2' >
	    	  <i></i>
	    </a>

	    <a href="">
	    	<input type="radio" name="rating" value="3" id='input3'>
	    	  <i></i>
	    </a>

	    <a href="">
	    	<input type="radio" name="rating" value="4" id='input4'>
	    	  <i></i>
	    </a>

	    <a href="">
	    	<input type="radio" name="rating" value="5" id='input5'>
	    	  <i></i>
	    </a>
  </div>

＆＃13;

Answer 2

以下是使用input s，label和flexbox的解决方案：

＆＃13;

.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.star-radio {
  display: none;
}

.star {
  width: 50px;
  height: 50px;
  background-image: url('http://imgh.us/greyStar.svg');
  background-size: contain;
  margin-left: 15px;
  cursor: pointer;
}

.star:hover,
.star-radio:checked + .star,
.star-radio:checked ~ .star,
.star:hover ~ .star {
  background-image: url('http://imgh.us/goldenStar.svg');
}

＆＃13;

<div class="star-rating">
  <input class="star-radio" id="star-1" type="radio" name="stars"/>
  <label for="star-1" class="star"></label>
  <input class="star-radio" id="star-2" type="radio" name="stars"/>
  <label for="star-2" class="star"></label>
  <input class="star-radio" id="star-3" type="radio" name="stars"/>
  <label for="star-3" class="star"></label>
  <input class="star-radio" id="star-4" type="radio" name="stars"/>
  <label for="star-4" class="star"></label>
  <input class="star-radio" id="star-5" type="radio" name="stars"/>
  <label for="star-5" class="star"></label>
</div>

＆＃13;

CodePen：http://codepen.io/FullR/pen/YqQgQL?editors=1100

Answer 3

这是一个不同的解决方案。我不得不更改您的HTML，因为您在使用重复背景时无法添加边距。

在这个示例中，我使用label而不是像您一样使用链接。
现在每个标签都有一个特定的尺寸，并有自己的背景。它不再是重复的背景。

如果您使用的是CSS预处理器，则可以使用loop来保持CSS清洁：）

在此处查看：http://codepen.io/Mamboleoo/pen/JXJzJy
如果您有任何疑问，请不要犹豫！

Answer 4

您可以更改>>> import example >>> c1 = example.C() >>> print 'init:', c1 init: <example.C object at 0x7f12f425d0a8> >>> c2 = None >>> def func(c): ... global c2 ... print 'func:', c ... c2 = c ... >>> example.register_callback(func) func: <example.C object at 0x7f12f425d0a8> >>> assert(c1 is c2)，这是您案例的简单解决方案。

只需将background-size添加到您的css中，其中第一个值是宽度，第二个值是高度。

并且不要忘记将background-size: 20% 100%;的宽度更改为新值（在这种情况下，我使用.star-rating）

我刚刚添加了6行代码并更改了一行。它应该如何：

400px

Answer 5

你可以尝试这个，Example on codepen

HTML

ObjectType[] objectArray = new ObjectType[10]; // Or as many as required.
for (int i = 0; i < objectArray.length; i++) {
    objectArray[i] = new ObjectType(); // Or whatever constructor you need.
}

// Then access an individual object like this...
ObjectType obj = objectArray[4];

// Or...
objectArray[5].someMethod();

CSS

<div class="star star-1"></div>
<div class="star star-2"></div>
<div class="star star-3"></div>
<div class="star star-4"></div>
<div class="star star-5"></div>

<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>

JAVASCRIPT

.star{
    background:url('http://imgh.us/greyStar.svg') no-repeat;
    width:50px;
    height:50px;
    background-size:50px 50px;
    float:left;
    padding:0 10px;
}

.star-hover{
    background:url('http://imgh.us/goldenStar.svg') no-repeat; 
    background-size:50px 50px;
}

＆＃13;

$(document).ready(function() {     
    $('.star-1').hover(function(){
        $('.star-1').toggleClass('star-hover');    
    });
    $('.star-2').hover(function(){
        $('.star-1, .star-2').toggleClass('star-hover');    
    });
    $('.star-3').hover(function(){
        $('.star-1, .star-2, .star-3').toggleClass('star-hover');    
    });
    $('.star-4').hover(function(){
        $('.star-1, .star-2, .star-3, .star-4').toggleClass('star-hover');    
    });
    $('.star-5').hover(function(){
        $('.star-1, .star-2, .star-3, .star-4, .star-5').toggleClass('star-hover');    
    });
});

＆＃13;

$(document).ready(function() {     
    $('.star-1').hover(function(){                 $('.star-1').toggleClass('star-hover');    
    });
    $('.star-2').hover(function(){                 $('.star-1, .star-2').toggleClass('star-hover');    
    });
    $('.star-3').hover(function(){                 $('.star-1, .star-2, .star-3').toggleClass('star-hover');    
    });
    $('.star-4').hover(function(){                 $('.star-1, .star-2, .star-3, .star-4').toggleClass('star-hover');    
    });
    $('.star-5').hover(function(){                 $('.star-1, .star-2, .star-3, .star-4, .star-5').toggleClass('star-hover');    
    });
});

＆＃13;

.star{
background:url('http://imgh.us/greyStar.svg') no-repeat;
  width:50px;
  height:50px;
  background-size:50px 50px;
  float:left;
  padding:0 10px;
}

.star-hover{
 background:url('http://imgh.us/goldenStar.svg') no-repeat; 
  background-size:50px 50px;
}

＆＃13;

如何在反馈明星之间增加保证金？

5 个答案: